使用 Flexbox 可轻松实现图文混排，通过 display: flex 和 align-items 控制垂直对齐，如 center 居中、flex-start 顶部对齐，配合 gap 间距和一致图片尺寸，确保多行文本与图片对齐良好，避免传统浮动布局的复杂性。
在网页设计中，图文混排是常见布局需求，比如新闻列表、产品卡片或用户评论。使用 Flexbox 能快速实现灵活且响应式的图文排列，并通过 align-items 精确控制图片与文字的垂直对齐。
使用 Flexbox 创建基础图文结构
将图片和文字包裹在一个容器中，设置为 Flex 容器，即可轻松实现水平排列。
<div class="flex-item">
<img src="example.jpg" alt="示例图片" style="max-width:90%" style="max-width:90%">
<div class="text-content">
<h4>标题文本</h4>
<p>这里是描述性文字内容，长度可能不同，但希望与图片对齐良好。</p>
</div>
</div>
CSS 设置容器为 flex：
立即学习“前端免费学习笔记（深入）”；
.flex-item {
display: flex;
gap: 16px;
}
此时图片和文字并排显示，文字从左到右排列，Flexbox 默认主轴为水平方向。
用 align-items 控制垂直对齐方式
align-items 决定子元素在交叉轴（默认为垂直轴）上的对齐方式。以下是常用值及其效果：
- align-items: center — 文字与图片垂直居中对齐，最常用
- align-items: flex-start — 对齐顶部，适合多行文本希望与图片顶端对齐
- align-items: flex-end — 对齐底部，较少用，可用于特殊设计
- align-items: baseline — 文字基线对齐图片底部，适合图标+短文本
例如让文字与图片垂直居中：
.flex-item {
display: flex;
align-items: center;
gap: 12px;
}
处理多行文本与图片不对齐问题
当文字内容较多时，即使设置了 align-items: center，也可能感觉对不齐。可通过以下方式优化：
- 限制图片尺寸一致，避免高度差异
- 给文字容器设置 line-height 统一行高
- 使用 align-self 单独调整某个子元素，如：
align-self: flex-start;
如果只想标题与图片居中，描述文字另作处理，可嵌套更细结构。
基本上就这些。Flexbox 配合 align-items 让图文混排变得简单直观，无需浮动或定位，也能实现稳定对齐效果。关键是理解主轴与交叉轴的关系，选择合适的对齐方式适配内容结构。
