Flex布局解决图文混排对齐难题，通过flex-direction设定主轴方向，justify-content控制主轴对齐，align-items控制交叉轴对齐，嵌套flex可实现多级对齐，且需确保父容器启用flex上下文。
图文混排对齐困难，核心在于没有明确控制元素在主轴（main axis）和交叉轴（cross axis）上的排列方式。Flex 布局正是为此而生——它天然支持二维对齐，只要搞清容器的主轴方向、设置好 justify-content（主轴对齐）和 align-items（交叉轴对齐），图文就能稳稳居中、左对齐、底对齐，甚至拉伸填满。
先定主轴方向：row 还是 column？
默认主轴是水平向右（flex-direction: row），此时：
-
justify-content控制图文在水平方向的位置（如左/中/右） -
align-items控制图文在垂直方向的对齐（如顶部/居中/底部）
若改成 flex-direction: column，主轴变垂直，两者的职责就互换。常见图文卡片多用 row，图标+文字横向排列；而头像+昵称+简介组合更适合 column 垂直堆叠。
文字与图片高度不一致？用 align-items 处理交叉轴
图片常带固有高度，文字行高较小，导致上下错位。这时别调 margin 或 vertical-align，直接在 flex 容器上设：
-
align-items: center—— 垂直居中（最常用） -
align-items: flex-start—— 顶端对齐（适合标题类图文） -
align-items: stretch—— 子项拉伸至容器高度（需子项未设固定高）
注意：如果图片设置了 vertical-align: middle，反而会干扰 flex 对齐，建议移除。
多个图文项间距不均？justify-content + gap 更可靠
想让一组图标文字并排且等距，别用 margin 模拟间隙，容易首尾多出空白。推荐组合使用：
-
justify-content: space-between—— 首尾贴边，中间等距 -
justify-content: space-evenly—— 所有间隙（含首尾）完全相等 - 配合
gap: 12px—— 现代写法，语义清晰，兼容性也已很好（Chrome 84+/Firefox 63+）
例如导航栏图标文字组，设 display: flex; justify-content: space-evenly; gap: 16px;，清爽又响应式。
单个图文内部不对齐？嵌套一层 flex 容器
有时外层是横向列表，但每个卡片内又要图标左、文字右、说明文字右下角——这是典型的“多级对齐”，靠一层 flex 不够。解决方案是嵌套：
- 外层容器：
display: flex; flex-wrap: wrap;控制整体流式布局 - 每个卡片自身：
display: flex; align-items: center;实现图标与主文字垂直居中 - 卡片内的说明文字再包一层
div，用margin-left: auto或margin-top: auto推到右侧或底部
这种“flex 套 flex”的结构灵活且可控，比浮动或绝对定位更健壮。
不复杂但容易忽略：flex 的对齐效果依赖于父容器是否真正启用了 flex 上下文，检查是否漏写了 display: flex，以及子元素是否被 float 或 position: absolute 脱离了文档流。
