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或内容溢出导致布局变形