当 flex-direction: column 时，justify-content 控制垂直对齐（上下），align-items 控制水平对齐（左右）；正确左对齐需 justify-content: center 与 align-items: flex-start 配合，并确保父容器有明确宽高。
flex-direction: column 时 justify-content 和 align-items 的作用方向容易搞反
很多人一上来就写 justify-content: center，结果文字“垂直居中了但水平也居中了”，不符合左对齐要求。根本原因是：当父容器设为 flex-direction: column，主轴变成垂直方向，justify-content 控制的就是**垂直对齐**（上下），而 align-items 控制的是**水平对齐**（左右）——此时它才是决定文字靠左/居中/靠右的关键。
正确组合是：
-
justify-content: center→ 让子元素整体在容器高度内垂直居中 -
align-items: flex-start→ 让子元素在容器宽度内左对齐（不是left，不能用） - 父容器必须有明确高度（如
height: 200px或min-height: 200px），否则justify-content: center没参考范围
文字本身是块级元素时，text-align 不影响 align-items 的效果
如果子元素是一个 <div> 或 <code><p></p>，里面装着多行文字，那 align-items: flex-start 只控制这个块的整体水平位置，不控制块内文字的换行对齐方式。你可能会看到块“靠左了”，但每行文字还是左对齐——这其实是预期行为；但如果希望文字在块内也左对齐（而不是默认的撑满+左对齐），不需要额外操作；但若误加了 text-align: center，反而会让文字居中，破坏左对齐。
所以只需确认：
- 子元素没意外设置
text-align: center或text-align: right - 子元素是标准块级标签（
<div>, <code><p></p>），不用设display: inline等干扰布局的样式 - 避免给子元素设
margin: auto—— 在column布局下它可能失效或触发不可预测的偏移 - 用浏览器开发者工具检查父容器的 computed
width，确认 > 0 - 临时加
outline: 1px solid red看容器实际渲染区域 - 避免嵌套在
display: inline-flex容器里，除非你明确控制了它的width - 响应式断点中，某些媒体查询可能让父容器
width塌缩，此时align-items表现会突变 - 给图片加
vertical-align: top或vertical-align: middle - 或者把图文包进一个
<div>，再对这个包裹层用 <code>align-items: flex-start - 不推荐只给文字加
align-self: flex-start——它只作用于单个子项，无法统一控制多个不同类型的子元素
父容器高度和宽度的实际值，比 flex 属性本身更容易成为居中失败的根源。尤其在响应式布局里，
父容器 width 为 0 或未生效时，align-items: flex-start 看似无效
最常被忽略的一点：如果父容器宽度计算结果为 0（比如套了 display: inline-flex 又没设 width，或祖先用了 width: fit-content），那 align-items: flex-start 就“没地方可左对齐”，看起来像没起作用。
排查方法：
图文混合场景下，align-items: flex-start 可能导致视觉错位
如果容器里同时有图片和文字（比如 <img> + <span></span>），align-items: flex-start 会让它们顶部对齐，但文字默认按基线（baseline）对齐，图片底部常留空白，造成“文字看起来比图片低”。这不是 align-items 失效，而是基线对齐的副作用。
解决方式很直接：
min-height 被覆盖、width 在某个断点归零、或 flex 项内容撑开容器后又重绘，都可能导致对齐“突然失效”。动手前先看 computed 样式，比反复调属性更省时间。
