align-items和justify-content仅对flex容器生效，需父元素设display: flex；前者控制交叉轴对齐（如flex-direction: row时垂直居中），后者控制主轴对齐（如row时水平居中），二者方向随flex-direction变化而互换。
align-items 和 justify-content 的作用对象必须是 flex 容器
这两个属性本身不直接作用于普通块元素，只有当父容器设置了 display: flex 或 display: inline-flex 时才生效。如果只是给某个 div 单独加 align-items: center，它不会有任何效果——浏览器会忽略该声明。
常见错误现象：
• 页面没变化，控制台无报错，但对齐无效
• 元素依然左上角堆叠，像默认文档流一样
- 先确认父容器是否已设为
display: flex - 注意：
align-items控制交叉轴（cross axis）对齐，justify-content控制主轴（main axis）对齐 - 主轴方向由
flex-direction决定：默认row（水平），此时主轴是水平方向，justify-content水平生效；若设为column，则主轴变垂直，justify-content就控制垂直对齐
align-items 常见取值与实际表现差异
align-items 默认值是 stretch，这会让子项在交叉轴方向拉满父容器高度（或宽度），常被误认为“没生效”。真正居中需显式设为 center。
-
flex-start：子项顶部/左侧贴齐交叉轴起点（取决于flex-direction） -
center：居中对齐，最常用 -
flex-end：贴齐交叉轴终点 -
stretch：默认行为，子项高度（或宽度）自动撑满交叉轴空间，若子项本身有height或min-height，则以自身尺寸为准 -
baseline：按第一行文字基线对齐，适合图文混排场景
注意：align-items 是容器级属性，不能写在子元素上；想单独控制某一个子项的交叉轴位置，得用 align-self。
立即学习“前端免费学习笔记（深入）”；
justify-content 在不同 flex-direction 下的行为陷阱
很多人以为 justify-content: center 总是“居中”，其实它只在主轴方向起作用。当 flex-direction: column 时，justify-content: center 是让子元素在**垂直方向**居中，而 align-items: center 才负责水平居中——这点极易搞反。
- 默认
flex-direction: row：
→justify-content控制**水平**对齐
→align-items控制**垂直**对齐 - 设为
flex-direction: column：
→justify-content控制**垂直**对齐
→align-items控制**水平**对齐 - 若同时需要水平+垂直居中，通常组合使用：
justify-content: center; align-items: center;
性能影响很小，但滥用 justify-content: space-between 或 space-around 在子项数量动态变化时，可能导致布局跳动，建议配合 min-width/min-height 稳定容器尺寸。
替代方案：什么时候不该用 flex 的 align-items/justify-content
如果目标只是单个子元素在其父容器中绝对居中，且父容器高度未知或不固定，flex 布局反而可能受限——比如父容器没有设定高度，align-items: center 在垂直方向就无法生效（因为交叉轴长度为 0）。
- 父容器高度未定义 → flex 居中失效，此时更适合用
position: absolute+transform: translate(-50%, -50%) - 需要兼容 IE10 及更早版本 → flex 不受支持，得回退到
display: table-cell+vertical-align: middle - 仅需文本内容在块内垂直居中 →
line-height匹配容器高度更轻量（仅限单行） - Grid 布局中对应的是
align-items/justify-items，但语法和作用域不同，别混用
真正容易被忽略的是：flex 对齐依赖父容器的尺寸约束和子项的渲染盒类型。比如子项是 float 元素或 position: absolute，它们会脱离 flex 流，align-items 和 justify-content 对其完全无效。
