图文左右对齐应使用 justify-content 而非 align-items；主轴方向由 flex-direction 决定，默认 row 时 justify-content 控制左右，align-items 控制上下；需确保图文同级位于 flex 容器内，并注意图片基线对齐和 box-sizing 问题。
图文在 Flex 容器中无法左右对齐，通常不是 align-items 的问题，而是混淆了主轴（horizontal）和交叉轴（vertical）的方向。用 align-items: center 只能实现**垂直居中**（即上下居中），对“左右对齐”没效果。
明确主轴方向：flex-direction 决定对齐逻辑
Flex 布局中：
-
主轴（main axis）：由
flex-direction决定，默认是row（从左到右）；此时左右对齐靠justify-content -
交叉轴（cross axis）：与主轴垂直；默认是上下方向，此时
align-items: center才起作用——让项目在容器高度方向上居中
左右对齐该用 justify-content
想让图文在一行内左右对齐（比如图标靠左、文字靠右），需控制主轴分布：
-
justify-content: flex-start→ 左对齐（默认） -
justify-content: flex-end→ 右对齐 -
justify-content: space-between→ 首尾贴边，中间均分空白（适合一左一右布局） -
justify-content: space-around→ 每个项目周围等距留白
例如：
<div style="display: flex; justify-content: space-between;">
<span>? 订单详情</span>
<button>编辑</button>
</div>
图文本身不对齐？检查是否包裹不当
常见错误：把图片和文字分别放在不同块级元素里，但没设为 flex 项目，或被内部 margin/padding 干扰：
立即学习“前端免费学习笔记（深入）”；
- 确保图文同级、都在 flex 容器内（不要多套 div 隔开）
- 图片默认是 inline 元素，可能有底部空白（基线对齐导致）→ 加
vertical-align: top或设display: block - 文字或图片设置了固定宽高/内外边距，挤压了对齐空间 → 用
box-sizing: border-box统一计算方式
需要图文垂直+水平都居中？组合使用
如果目标是整个图文组在父容器中**水平居中 + 垂直居中**（比如卡片里的图标+标题）：
- 父容器设
display: flex - 加
justify-content: center（水平居中） - 加
align-items: center（垂直居中）
这时 align-items: center 才真正派上用场 —— 但它管的是“上下”，不是“左右”。
基本上就这些。别被“居中”二字带偏，先看方向，再选属性。
