align-content写了却无效，是因为它需同时满足三个硬性条件：容器为display: flex、flex-wrap设为wrap或wrap-reverse、交叉轴有明确且富余空间；缺一即被浏览器忽略。
align-content 为什么写了却像没写一样
它根本不是“一设就起效”的属性，而是被三个硬性条件卡住的开关：容器必须是 display: flex、必须启用换行（flex-wrap: wrap 或 wrap-reverse）、交叉轴方向必须有明确且富余的空间。三者缺一，浏览器直接忽略该声明。
常见失效场景：
-
flex-wrap: nowrap（默认值）—— 容器压根不换行，align-content被静默丢弃 - 子项总高度 ≤ 容器
height，实际只有一行 —— 多行逻辑未触发 - 仅设
min-height但父容器未撑开，导致 computed height 等于 content height，没有“剩余空间”可分配 - 同时设了
align-items: stretch，每行子项被拉高，掩盖了行间位置变化
多行对齐和单行对齐不能混着调
align-content 和 align-items 职责完全分离，强行叠加反而互相干扰：
-
align-content只管“所有行作为一个整体”在交叉轴上的分布（比如三行一起往上浮、居中、或拉开间距） -
align-items只管“每一行内部”的子项对齐（比如每行里的卡片都顶部对齐，或都居中） - 如果希望最后一行左对齐且不拉伸，用
align-content: flex-start+justify-content: flex-start，而不是靠align-items去“补救” - 想让某张卡片单独垂直居中？别动容器，给它加
align-self: center
space-between / space-around / space-evenly 的真实间距差异
它们看着都是“均匀”，但首尾留白逻辑完全不同，视觉偏差肉眼可见：
立即学习“前端免费学习笔记（深入）”；
-
space-around：每行上下各分一半间距 → 首行顶边到容器顶 = 行间间距 ÷ 2；末行底边到容器底 = 同样值 → 首尾看起来更紧凑 -
space-evenly：容器顶 → 首行顶 → 首行底 → 第二行顶 → … → 末行底 → 容器底，共 N+1 段等距空白 → 最符合直觉，但space-evenly在 Safari 14.1 及更早版本不支持 -
space-between：首行顶贴容器顶、末行底贴容器底，中间行等距 → 行间空隙大，首尾无额外留白
验证方式：给容器加 border: 1px solid red 和固定 height，再观察行块整体浮动位置。
容器高度到底该怎么设才靠谱
不能只靠 min-height 或内容撑开，必须让浏览器明确知道“有富余空间可调度”：
- 首选
height: 300px这类固定值，最可控 -
min-height可用，但要确保父容器已撑开（比如父级设了height: 100vh或display: flex+flex: 1） - 避免
max-height限制过紧，挤压可用空间 - 用开发者工具的 Computed 面板对比容器的
height和content height：若二者相等，align-content就没操作对象
真正容易被忽略的点是：换行本身依赖宽度计算，而 align-content 生效又依赖高度富余 —— 两者不在同一维度，但必须同时满足，稍有偏差，整个对齐逻辑就断链。
