如何使用 Flex 布局优雅地布局带图片的段落？

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《如何使用 Flex 布局优雅地布局带图片的段落？ 》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

如何优雅地布局带图片的段落？

当我们遇到需要在段落中放置图片的情况时，为了实现美观布局，我们可以考虑以下技巧：

解决方案：

1. 大盒子采用 flex 布局：将包含图片和文本的容器作为 flex 容器。

2. 包裹图片的小盒子：创建一个包裹图片的子盒子，并添加以下样式：

   • flex-shrink: 0; 禁止收缩
   • flex-grow: 0; 禁止拉伸
   • margin-left: 负值; 调整图片与文本对齐

这样，小盒子将根据图片大小固定宽度，并且文本可以灵活地填充可用空间，而图片将始终保持与其原始大小一致。

示例代码：

<div class="container">
  <div class="image-wrapper">
    <img src="image.jpg" />
  </div>
  <p>这是一个带图片的段落...</p>
</div>

.container {
  display: flex;
}

.image-wrapper {
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: -20px;
}

理论要掌握，实操不能落！以上关于《如何使用 Flex 布局优雅地布局带图片的段落？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！