17370845950

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