Flex布局中justify-content控制主轴对齐（方向由flex-direction决定），align-items控制交叉轴对齐，默认stretch易致变形，可用align-self为单个子项覆盖，容器无高度时align-items可能无效。
Flex 布局中主轴（main axis）和交叉轴（cross axis）的对齐行为由两个独立属性控制：justify-content 管理主轴，align-items 管理交叉轴。它们默认值不同、作用方向不同，若没显式设置，容易出现“看起来对不齐”或“预期不符”的情况。
确认主轴方向再设 justify-content
justify-content 只在主轴上生效，而主轴方向由 flex-direction 决定：
- flex-direction: row（默认）→ 主轴水平向右，justify-content 控制左右对齐
- flex-direction: column → 主轴垂直向下，justify-content 控制上下对齐
常见误区：在 column 方向下仍用 justify-content: center 期望“居中于容器高度”，这是正确的；但若误以为它总管“水平居中”，就会出错。务必先看 flex-direction。
align-items 默认拉伸，常需覆盖
align-items 默认值是 stretch，会让子项在交叉轴上填满容器高度（row 时）或宽度（column 时）。这常导致文字不垂直居中、图片被撑变形等问题。
- 想让所有子项在交叉轴上居中？设 align-items: center
- 顶部对齐（如导航栏图标对齐）？align-items: flex-start
- 避免 stretch 导致高度失控？可给子项设 min-height: 0 或 align-items: flex-start
单个子项需要特殊对齐？用 align-self
align-items 是容器级设置，影响所有子项；若某个子项要例外，直接在其上加 align-self：
- align-self: center —— 覆盖容器的 align-items，单独垂直/水平居中
- align-self: flex-end —— 靠交叉轴末端对齐（比如右对齐一个按钮）
- align-self: auto —— 恢复继承自父容器的 align-items 值
内容少又想撑满容器？注意 min-height / min-width
当 flex 容器没有明确尺寸（比如高度为 auto），且子项内容很少时，align-items: center 可能“看起来没效果”——其实是容器本身没高度，子项只能按内容高度排布。
- 确保父容器有高度：比如 min-height: 100vh 或 height: 400px
- 或用 align-content: center（仅当多行 flex-wrap 时生效）
- 单行布局中，align-content 不起作用，别混淆它和 align-items
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
