Flex布局中子元素对齐异常的根源在于父容器align-items（管交叉轴）与justify-content（管主轴）的职责混淆；二者各司其职、无优先级覆盖，需依flex-direction判断主/交叉轴方向，并注意align-self可覆盖align-items，而主轴单元素定位须用auto外边距。

Flex 布局中子元素对齐“不听使唤”，往往不是子元素自己乱来，而是父容器的 align-items 和 justify-content 设置产生了隐含冲突或理解偏差。关键不在子元素加什么，而在父容器这两个属性**各自管什么方向、何时生效、谁优先级更高**。

align-items 管的是交叉轴（垂直方向）的对齐

它作用于所有子元素在**交叉轴**上的对齐方式。主轴由 flex-direction 决定：若为 row（默认），主轴水平，交叉轴就是垂直方向；若为 column，主轴垂直，交叉轴就变成水平方向。

• align-items: flex-start → 子元素顶部（或左端）对齐交叉轴起点
• align-items: center → 所有子元素在交叉轴上居中（最常用）
• align-items: stretch（默认）→ 子元素拉伸填满交叉轴（除非设置了固定宽/高）

justify-content 管的是主轴（水平方向）的对齐

它只影响子元素在**主轴**上的分布，和交叉轴完全无关。比如 flex-direction: row 时，它控制左右间距；flex-direction: column 时，则控制上下间距。

• justify-content: flex-start → 靠主轴起点排列（默认左对齐）
• justify-content: center → 整体在主轴居中
• justify-content: space-between → 首尾贴边，中间等距

冲突常见场景与解法

所谓“冲突”，通常是误以为某个属性能控制另一方向，或多个规则叠加导致意外效果：

• 想让单个子元素右下角定位，却只设 justify-content: flex-end + align-items: flex-end → 这会让**所有子元素**挤在右下角。正确做法是给该子元素单独加 margin-left: auto（主轴）和 margin-top: auto（交叉轴），利用自动外边距“推”到角落
• 子元素设置了固定高度，但 align-items: stretch 没生效 → 因为 stretch 对已有 height/width 的元素无效，需改为 align-items: center 或清除固定尺寸
• 用了 flex-direction: column 却还在用“左右”思维调 justify-content → 此时它控制的是**上下**对齐，justify-content: center 是垂直居中，align-items: center 才是水平居中

优先级与覆盖逻辑

这两个属性本身不互相覆盖，因为各司其职。真正容易混淆的是：子元素自身的 align-self 会覆盖父级 align-items，而 justify-content 没有对应子级属性（不能单个调整主轴位置，只能靠 margin 或 auto 实现）。

• 要单独调整某个子元素的交叉轴位置？用 align-self: flex-end
• 要单独调整它在主轴的位置？不用 justify 类属性，改用 margin-left: auto（row）或 margin-top: auto（column）
• 父容器同时设了 align-items 和 justify-content，但没效果？先确认 display: flex 已生效，再检查子元素是否因 flex-wrap: wrap 或内容溢出导致布局变形