在网页前端开发中，图文混排是极为常见的页面结构，其中图片左对齐、文字在右侧排列，同时需要合理控制二者之间的间距，是很多页面模块的基础需求。Flex布局凭借其灵活的排版能力，能够非常便捷地实现这类效果，不需要复杂的浮动或者定位设置。
基础Flex布局实现图片左对齐
要实现图片左对齐，核心是将图文容器设置为Flex布局，Flex布局默认的主轴方向是水平从左到右，子元素会按照顺序排列，因此只需要将图片作为第一个子元素，自然就会左对齐排列。
首先我们准备基础的HTML结构，包含一个容器，内部有图片和文字内容：
<div class="flex-container">
<img src="https://picsum.photos/200/200?random=2" alt="示例图片" class="left-img">
<div class="text-content">
<h3>这里是标题内容</h3>
<p>这里是具体的文字描述内容，会展示在图片的右侧区域，整体排版需要保持整齐美观。</p>
</div>
</div>
接下来给容器添加Flex布局的基础样式，此时图片会默认左对齐，文字内容会紧跟在图片右侧：
.flex-container {
display: flex;
/* 可选：如果需要垂直方向居中对齐可以添加 align-items: center; */
}
.left-img {
width: 200px;
height: 200px;
object-fit: cover;
}
.text-content {
/* 文字内容区域的基础样式 */
}
控制图片与文字间距的常用方法
方法一：使用margin属性控制间距
这是最直观的方法，给图片元素添加右侧外边距，就可以直接拉开图片和文字之间的距离，兼容性也最好，支持所有主流浏览器。
.left-img {
width: 200px;
height: 200px;
object-fit: cover;
/* 设置图片右侧间距为20px，可根据需求调整数值 */
margin-right: 20px;
}
这种方式的优点是精准控制单个元素的间距，如果页面中有多个类似的图文模块，部分模块需要不同的间距，只需要单独修改对应图片的margin-right属性即可。
方法二：使用Flex布局的gap属性
如果使用的是较新版本的浏览器，或者项目不需要兼容太旧的浏览器版本，可以使用Flex布局自带的gap属性，统一设置子元素之间的间距。
.flex-container {
display: flex;
/* 设置子元素之间的水平间距为20px */
gap: 20px;
/* 如果需要同时设置垂直间距可以写 gap: 20px 20px; 第一个值是行间距，第二个值是列间距 */
}
.left-img {
width: 200px;
height: 200px;
object-fit: cover;
}
gap属性的优势是只需要给父容器设置一次，所有子元素之间的间距都会生效，不需要单独给每个子元素设置margin，维护起来更方便。
方法三：给文字容器添加左侧内边距
除了给图片加外边距，也可以给右侧的文字容器添加左侧内边距，同样能达到控制间距的效果，这种方式适合文字容器本身需要保留内边距的场景。
.text-content {
/* 设置文字容器左侧内边距为20px，拉开和图片的距离 */
padding-left: 20px;
}
不同场景的适配方案
如果需要在小屏幕设备上调整布局，比如屏幕宽度小于768px时，图文垂直排列，只需要在媒体查询中修改Flex布局的方向即可：
@media screen and (max-width: 768px) {
.flex-container {
/* 改为垂直排列 */
flex-direction: column;
align-items: flex-start;
}
.left-img {
/* 垂直排列时，间距改为底部间距 */
margin-right: 0;
margin-bottom: 15px;
}
}
需要注意的是，如果使用gap属性控制间距，垂直排列时gap会自动作用于垂直方向的子元素之间，不需要额外修改。
常见问题说明
- 如果设置了Flex布局但图片没有左对齐，需要检查是否设置了
flex-direction: row-reverse;，这个属性会反转子元素的排列顺序，导致图片到右侧。 - 如果图片和文字没有在同一行，可能是图片的宽度设置过大，导致Flex容器一行放不下两个子元素，可以适当缩小图片宽度，或者给容器设置
flex-wrap: nowrap;禁止换行。 - 控制间距时，不要在图片和文字容器同时设置margin和padding，避免间距叠加导致效果不符合预期。