使用Flexbox可轻松实现响应式图文混排。1. 设置容器display: flex、flex-wrap: wrap和align-items: center以启用弹性布局并控制换行与垂直对齐；2. 每个图文项包含图片和文字，通过.item设置flex: 0 0 auto及gap间距优化布局；3. 结合媒体查询如@media (max-width: 768px)调整.item宽度为calc(50% - 8px)，实现移动端每行两列的自适应效果。
在网页布局中，图文混排是常见的设计需求。使用CSS的Flexbox可以轻松实现灵活、响应式的图文排列效果。通过结合 flex-wrap 和 align-items 属性，不仅能控制元素的换行方式，还能统一垂直对齐方式，使内容更美观。
1. Flex容器基础设置
要开启Flex布局，首先需要将父容器设为 display: flex。这样其子元素会自动成为Flex项目，按主轴方向排列。
常用设置：例如，一个图文卡片列表：
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
2. 图文项结构与样式
每个图文项通常包含图片和文字。通过设置子元素的宽度和对齐方式，可实现整齐的混排布局。
立即学习“前端免费学习笔记（深入）”；
HTML结构示例：
CSS样式建议：
- 给 .item 设置 flex: 0 0 auto 或固定宽度，避免拉伸
- 图片使用 vertical-align: middle 或设为块级居中
- 使用 gap 控制间距，比margin更简洁
3. 响应式换行与对齐控制
当容器宽度不足时，flex-wrap: wrap 会让项目自动换行，适合移动端适配。
关键点：- 设置 flex-wrap: wrap 避免溢出
- 使用 align-items: center 让每行项目垂直居中
- 若需顶部对齐，可改为 align-items: flex-start
- 配合媒体查询调整 item 宽度，实现栅格效果
例如，在小屏幕上每行显示两个项目：
@media (max-width: 768px) {
.item {
flex: 0 0 calc(50% - 8px);
}
}
基本上就这些。合理使用 flex-wrap 和 align-items，能快速搭建出结构清晰、自适应的图文布局，无需浮动或定位，维护也更方便。
