align-items对多行flex容器无效，其仅控制单行内子项交叉轴对齐；多行整体分布需用align-content，且仅当容器交叉轴有剩余空间时才生效。
flex布局中align-items对多行flex容器无效？
多行flex容器（即设置了flex-wrap: wrap）下，align-items只作用于单行内的交叉轴对齐，不会控制多行整体在交叉轴上的分布。想让多行内容在容器内居中、拉伸或均匀分布，得换用align-content。
常见错误现象：align-items: center写上了，但两行子项上下堆叠后依然顶对齐，没居中——因为此时真正起作用的是align-content，而它的默认值是stretch（仅当行高不占满容器时才可见效果），多数情况下它其实是flex-start的视觉表现。
-
align-content只在多行flex容器中生效（即flex-wrap: wrap或wrap-reverse） - 单行容器中设置
align-content完全无效，浏览器会忽略 - 若子项本身有
align-self，它会覆盖align-items，但不影响align-content
grid布局里用align-content还是justify-content？
Grid中交叉轴对齐多行轨道，统一由align-content控制；主轴对齐用justify-content。别和flex记混——grid没有align-items控制“行内对齐”，它用align-items控制的是单个网格项在其单元格内的交叉轴对齐（类似flex的align-self）。
典型场景：一个display: grid容器设了grid-template-rows: repeat(3, 100px)，但总高度远大于300px，空余空间怎么分配？就看align-content：
立即学习“前端免费学习笔记（深入）”；
-
align-content: start→ 所有行贴顶部 -
align-content: center→ 多行整体在容器交叉轴居中 -
align-content: space-between→ 行与行之间等距，首尾贴边 -
align-content: stretch（默认）→ 拉伸每行填满剩余空间（注意：仅当行高为auto或minmax等可伸缩值时才实际生效）
为什么align-content: center有时没反应？
根本原因：容器在交叉轴方向没有“多余空间”。align-content只在多行且容器尺寸 > 所有行高度总和时才起作用。
常见排查点：
- 检查容器是否设置了固定高度（如
height: 400px），如果子行加起来已经占满，就没有空间可居中 - 确认
flex-wrap或grid-auto-rows确实产生了多行（例如flex子项总宽超容器、grid显式定义了多行但内容溢出） - Chrome DevTools里看computed样式，确认
align-content值被应用，且容器交叉轴尺寸确实大于内容总尺寸 - 避免同时设
align-items: stretch+align-content: center：前者会让每行撑满容器，直接消灭了align-content的生效前提
IE11兼容性下align-content能用吗？
不能直接用。IE11的Flexbox实现不支持align-content（包括space-around、space-between等所有值），设了也无效。Grid更不用提——IE11的Grid是旧草案，align-content完全不识别。
替代方案只能退回到“模拟”逻辑：
- Flex多行居中：给容器加
padding-top和padding-bottom手动留白，再配合align-items: flex-start - Grid多行居中：改用
display: -ms-flexbox（IE私有前缀），并用-ms-flex-pack和-ms-flex-align组合逼近效果，但无法真正实现space-between类分布 - 最稳做法：服务端或构建时判断UA，对IE11降级为单行+垂直居中（
align-items: center+height+line-height）
跨浏览器对齐多行，从来不是调一个属性就能搞定的事。关键得先分清：你面对的是flex多行、grid多轨，还是老IE——三者机制不同，失效原因也完全不同。
