新手用 Flex 布局最常踩的坑是混淆主轴与交叉轴：主轴由 flex-direction 决定（row 为水平，column 为垂直），justify-content 控制主轴对齐，align-items 控制交叉轴对齐；二者作用方向随 flex-direction 动态变化，且 align-items 需父容器有明确交叉轴尺寸才生效。
新手用 Flex 布局时，最常踩的坑就是搞混主轴（main axis）和交叉轴（cross axis），导致 justify-content 和 align-items 效果“不按预期”出现——其实不是 CSS 有问题，是方向理解错了。
主轴方向由 flex-direction 决定，不是固定左右
很多人默认主轴是水平向右，所以看到 justify-content: center 没居中就慌了。但只要写了 flex-direction: column，主轴立刻变成垂直向下，此时 justify-content 控制的就是 ** 垂直方向 ** 的对齐，而 align-items 才管水平对齐。
-
flex-direction: row（默认）→ 主轴水平 →justify-content水平生效，align-items垂直生效 -
flex-direction: column→ 主轴垂直 →justify-content垂直生效，align-items水平生效 -
flex-direction: row-reverse或column-reverse会翻转主轴起点，影响justify-content的“左 / 上”参照基准
align-items 不作用于单个子项，而是容器内所有项目整体
新手常给某个子元素单独加 align-self 却忘了父容器没设 align-items，或误以为 align-items 能让某一个孩子“自己居中”。实际上：
-
align-items是父容器属性，定义所有子项在交叉轴上的默认对齐方式 - 单个子项想例外对齐，要用
align-self（如align-self: flex-start），但它仍受父容器交叉轴范围限制 - 如果父容器高度未设定（比如
height: auto），且子项没撑开容器，交叉轴可能“没空间”，align-items就看起来“失效”
justify-content 在交叉轴完全无效，别乱用
这是高频混淆点：justify-content 只管主轴，永远不管交叉轴。哪怕你写 justify-content: center 并希望内容在盒子中间，若主轴是水平的，它只左右居中；上下居中得靠 align-items: center（前提是父容器有明确的交叉轴尺寸）。
立即学习 “ 前端免费学习笔记（深入）”；
- 想实现真正的“水平 +垂直居中”？常用组合：
display: flex; justify-content: center; align-items: center; - 但注意：如果父容器没有高度（比如 div 默认 height: auto），且子项又不占满高度，
align-items: center仍会让子项在“视觉上偏上”——因为交叉轴长度 = 子项高度，没多余空间可居中 - 解决办法：给父容器设
min-height: 100vh或明确height，再配合align-items: center
flex-wrap 不改变主轴方向，但会影响多行时的交叉轴行为
当子项太多换行（flex-wrap: wrap），主轴方向不变，但交叉轴会从“单行”变成“多行堆叠方向”。这时：
-
justify-content依然只控制 ** 每行内部 ** 主轴对齐（如每行内左对齐） -
align-content才控制 ** 行与行之间 ** 在交叉轴上的分布（比如多行上下间距、整体居中） -
align-items仍然控制 ** 每一行内各子项 ** 在交叉轴上的对齐（比如每行的子项都顶部对齐）
