justify-content控制主轴对齐，align-items控制交叉轴对齐；主轴由flex-direction决定，row时主轴水平、column时主轴垂直。
align-items 和 justify-content 的作用方向怎么分
justify-content 控制主轴（main axis）上的对齐，align-items 控制交叉轴（cross axis）上的对齐。主轴方向由 flex-direction 决定：默认是 row（→），此时主轴水平、交叉轴垂直；设为 column（↓）后，主轴变垂直、交叉轴变水平。
容易混淆的是“哪个是主轴”——别记方向，只记：谁被 flex-direction 指定了，谁就是主轴；另一个自动是交叉轴。
- 默认
flex-direction: row→justify-content水平生效，align-items垂直生效 -
flex-direction: column→justify-content垂直生效，align-items水平生效 - 如果容器没设高度，
align-items: center在column下可能“没效果”，因为交叉轴（水平）上父容器宽度默认撑满，居中不可见
justify-content 常用值的实际表现差异
justify-content 对 flex 项目整体起作用，不是单个子项。它只在主轴有剩余空间时才可见效果（比如项目总宽小于容器宽）。
-
flex-start：项目靠主轴起点对齐（默认值，row下是左对齐） -
center：项目在主轴居中，注意是“整体居中”，不是每个项目自己居中 -
space-between：首尾项目贴边，中间等距；若只有一个项目，等效于flex-start -
space-around：每个项目两侧留等量空白，视觉上间隙不均（首尾项目外侧只有半份空隙） -
space-evenly：所有间隙（含首尾外侧）完全相等，但 IE 不支持
示例：
.container { display: flex; justify-content: space-between; } .item { width: 80px; } —— 三个 .item 会两两等距分布，左右边缘无空隙。
align-items 处理单行 vs 多行 flex 容器的区别
align-items 默认影响所有 flex 项目在交叉轴上的对齐方式，但它**只对单行 flex 容器可靠**。一旦项目换行（flex-wrap: wrap），每行会独立形成一个“行盒”，align-items 无法控制行与行之间的间距。
立即学习“前端免费学习笔记（深入）”；
- 单行场景（
flex-wrap: nowrap）：align-items: center能让所有项目在交叉轴上垂直/水平居中 - 多行场景：需改用
align-content控制行与行之间在交叉轴上的分布（如stretch、center、space-between） -
align-items: stretch是默认值，会让项目拉伸填满交叉轴——但如果项目设置了height或min-height，拉伸会被阻止
为什么 align-items:center 有时没反应
常见失效原因不是写错了属性，而是父容器或子元素的尺寸约束干扰了交叉轴对齐逻辑。
- 父容器在交叉轴方向没有明确尺寸（如
flex-direction: row时，容器没设height或min-height），align-items: center仍会生效，但浏览器按内容高度计算交叉轴范围，看起来像“没动” - 子元素设置了
align-self: flex-start，会覆盖父级align-items，优先级更高 - 子元素是绝对定位（
position: absolute），已脱离 flex 流，align-items对其无效 - 父容器用了
flex-direction: column且未设宽度，align-items: center实际是让项目水平居中——但若项目是块级元素，默认占满父宽，就看不出居中效果
调试建议：临时加 border: 1px solid red 到容器和子项，观察实际尺寸边界，比猜更准。