align-content写了没反应，是因为它仅在三条件同时满足时才生效：display: flex、flex-wrap: wrap（或wrap-reverse）、容器交叉轴有明确且富余高度；缺一即被浏览器忽略。
align-content写了没反应？先看这三件事
它不是“设了就起效”的属性，而是浏览器直接跳过的条件型控制。三个硬性条件缺一不可：display: flex、flex-wrap: wrap（或wrap-reverse）、容器在交叉轴方向有**明确且富余的高度**（如height: 400px或min-height: 300px，且子项换行后总高度小于该值）。
常见失效场景：
-
flex-wrap: nowrap（默认值）没改，子项强行挤在一行 - 子项总高度没撑出第二行，浏览器判定为“单行”，直接忽略
align-content - 只写
min-height: 100vh但父容器塌陷，导致 computedheight===content height—— 没有剩余空间可分
验证方法：打开开发者工具 → 找到该容器 → 切到 Computed 面板 → 对比height和content height。二者相等，说明align-content已被跳过。
space-between / space-around / space-evenly 的间距逻辑差异
这三个值都叫“均匀”，但首尾留白处理完全不同，视觉效果差距极大：
立即学习“前端免费学习笔记（深入）”；
-
space-between：第一行顶边紧贴容器顶部，最后一行底边紧贴容器底部，中间空隙均分 → 行间有间距，首尾无额外留白 -
space-around：每行上下各分配一半间距 → 首行顶边到容器顶 = 行间间距 ÷ 2；末行底边到容器底 = 同样值；所以首尾视觉留白看起来比行间小 -
space-evenly：所有相邻边缘间距完全相等（容器顶 → 首行顶 → 首行底 → 第二行顶 → … → 末行底 → 容器底）→ 最符合直觉的“均匀”，但 Safari 14.1 及更早版本不支持
示例：.container { display: flex; flex-wrap: wrap; height: 300px; align-content: space-evenly; }，若有三行内容，总共产生 4 段等高空白。
最后一行内部不对齐？align-content 压根不管这事
比如卡片网格每行 3 张，共 10 张 → 最后一行只有 1 张，孤零零靠左。这不是align-content的职责范围，它只管“行与行之间”，不管“行内怎么排”。
此时该用的是justify-content或伪元素补位：
-
justify-content: space-between对最后一行无效（单个子项会被挤到最左） - 更可靠做法：
.container::after { content: ""; flex: 0 0 30%; visibility: hidden; }（假设单卡宽度为 30%） - 或者接受设计现实：用
justify-content: flex-start+ 左对齐语义，多数成熟系统其实就采用这种方式
和 align-items、justify-content 的协作边界在哪
三者职责分明，互不覆盖：
-
justify-content：控制主轴方向（flex-direction所指方向）上“单行内”子项的对齐 -
align-items：控制交叉轴上“每一行内”子项的对齐（每行独立生效） -
align-content：控制交叉轴上“所有行作为一个整体”的对齐（仅多行时起作用）
比如flex-direction: row; flex-wrap: wrap;时，主轴是水平，交叉轴是垂直 —— 此时align-content才管垂直方向的行间分布。如果改成column + wrap，主轴变垂直，align-content就转而控制水平方向的列间分布。
最容易被忽略的点是：当align-content: stretch（默认）遇上align-items: stretch，会双重拉伸 —— 行被拉高、行内子项也被拉高，可能意外破坏已有height或line-height。若只需居中对齐多行，center更安全，但它会让所有行整体偏移，而非每行独立居中。
