justify-content控制主轴对齐，align-items控制交叉轴对齐；二者作用方向随flex-direction改变，且均依赖容器在对应轴向的有效空间。
justify-content 控制的是主轴方向的对齐
当父容器是 display: flex 时，justify-content 决定子元素在主轴（默认是水平方向）上的分布方式。它只影响子元素之间的间距或整体偏移，不改变单个子元素内部内容的对齐。
常见取值和效果：
-
flex-start：所有子元素靠主轴起点对齐（默认） -
center：子元素沿主轴居中，彼此间距不变 -
space-between：首尾子元素贴住两端，中间等距分配空白 -
space-around：每个子元素两侧留等量空白（视觉上中间间隙略大） -
space-evenly：所有空白（包括首尾外侧）完全相等
注意：justify-content 对单个子元素无效——如果只有一个子元素，center 和 flex-start 看起来没区别，除非你同时设置了 width 或 flex-grow 让它有“可居中”的空间。
align-items 控制的是交叉轴方向的对齐
align-items 影响所有子元素在交叉轴（默认是垂直方向）上的对齐基准线。它作用于每个子元素自身，按其内容盒（content box）或边界盒（取决于 box-sizing）对齐。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 取值如
flex-start、center、flex-end、stretch（默认），都针对交叉轴 -
stretch会让子元素在交叉轴方向拉伸填满容器高度（前提是子元素没设固定高度） - 若子元素设置了
align-self，会覆盖父级align-items的设定 - 当父容器高度未明确（比如由内容撑开），
align-items: center可能无视觉效果——因为容器没“可居中的空间”
例如：父容器 height: 200px，子元素 height: 40px，此时 align-items: center 才会让它垂直居中。
主轴方向变了，justify-content 和 align-items 的作用方向也跟着变
一旦用 flex-direction: column 把主轴改成垂直方向，justify-content 就控制垂直对齐，align-items 则转为控制水平对齐。
这意味着：
- 原来写
justify-content: center; align-items: flex-start实现“水平居中 + 顶部对齐”，在column下就变成“垂直居中 + 左侧对齐” - 别硬记“justify 是水平、align 是垂直”，要看
flex-direction和writing-mode - 调试时可临时加
outline: 1px solid red到父容器和子元素，直观观察主轴走向
align-items 不生效？先检查这三件事
这是最常被卡住的地方：
- 父容器没设
display: flex或display: inline-flex——align-items在非 flex 容器里完全无效 - 父容器在交叉轴方向没有“可用空间”：比如
flex-direction: row时，父容器没设height或min-height，浏览器按内容高度渲染，自然无法居中 - 子元素设置了
align-self: stretch（默认）且没设高度，但父容器高度又来自内容——此时拉伸后高度等于父容器，看不出对齐变化
快速验证法：给父容器加 border: 1px solid 和明确 height，再看子元素是否动了。
