align-content: space-around 仅在多行 flex 容器（flex-wrap: wrap/reverse 且至少两行）中生效；单行时无效，应使用 align-items；IE11 不支持该值，需降级或改用 Grid；column 方向下它控制水平分布而非垂直。
align-content: space-around 在多行 flex 容器中不起作用？
它只对 flex-wrap: wrap 或 wrap-reverse 且**至少两行以上**的 flex 容器生效。单行 flex（默认 flex-wrap: nowrap）下，align-content 完全无效——此时该用 align-items 控制单行内项目的垂直对齐。
常见错误现象：align-content: space-around 写了但子项还是挤在顶部/底部，毫无“间距感”。
- 检查父容器是否设置了
flex-wrap: wrap - 确保子项总高度超出了容器高度（否则只有一行）
- 确认容器有明确高度（
height或min-height），否则可能“撑不开”第二行
space-around 和 space-between 的实际分布差异
space-around 会给**首行前、末行后、行与行之间**都分配相等的空间；而 space-between 只在**行与行之间**分配空间，首行前和末行后不留空。
这意味着：如果容器高度固定、内容刚好铺满两行，space-around 会让上下边缘留白 ≈ 行间空隙的一半；space-between 则顶天立地，仅中间有空隙。
立即学习“前端免费学习笔记（深入）”；
-
space-around：适合需要“呼吸感”的卡片列表，边缘也需缓冲 -
space-between：适合强调紧凑节奏的布局，如时间轴、步骤条 - 注意：两者都不影响单行内项目的对齐，那是
align-items的职责
IE11 对 align-content: space-around 的兼容性陷阱
IE11 支持 align-content，但**不支持 space-around 值**——会直接忽略该声明，退回到默认的 stretch 行为（各行拉伸填满容器）。
如果你的项目仍需兼容 IE11，不能只靠 align-content: space-around 实现多行居中分布。
- 可用
align-content: center+ 手动加空的::before/::after伪元素模拟（但需 JS 动态判断行数） - 更稳妥的是改用 CSS Grid：
display: grid; grid-template-rows: repeat(auto-fill, minmax(80px, 1fr))配合justify-content: space-around（IE11 Grid 也不完全支持，需权衡） - 或者放弃“around”，降级为
align-content: space-between（IE11 支持该值）
flex-direction: column 下 align-content 的行为变化
当 flex-direction: column 时，align-content 控制的是**列方向上的行分布**——也就是各“列块”在容器宽度方向上的水平分布，而非垂直分布。
换句话说：此时 align-content: space-around 影响的是**左右间距**，不是上下。想控制垂直方向的多行分布，得换思路——要么切回 row，要么用 justify-content（在 column 下它才管垂直）。
- 别被名字误导：
align-前缀始终对应flex-direction的**交叉轴** -
row→ 交叉轴是 vertical →align-content管垂直分布 -
column→ 交叉轴是 horizontal →align-content管水平分布
align-content 就像拧错螺丝。 
