align-items 不支持 space-between，该值会被忽略；垂直等距应根据布局方向选 align-content（多行+flex-wrap）或 justify-content（column 方向），且容器必须设置固定高度。
flex 容器设了 align-items: space-between 为什么没效果
align-items 只控制**单行内子项在交叉轴上的对齐方式**，它不支持 space-between 这个值。你写的这个声明会被浏览器直接忽略（查 DevTools 的 Styles 面板能看到它被划掉）。合法值只有：flex-start、center、flex-end、stretch、baseline 等，就是没有 space-between。
想让 flex 子项在垂直方向等距分布，该用 justify-content 还是 align-content
取决于你的 flex 布局方向：
- 如果容器是
flex-direction: row（默认），那么「垂直方向」就是交叉轴 → 此时要靠 多行 +align-content: space-between实现 - 如果容器是
flex-direction: column，那么「垂直方向」就是主轴 → 此时要用justify-content: space-between
关键前提：无论哪种，都要求子元素**不能填满整条轴**（否则没空间可分），且：
- 对
align-content：必须是多行 flex（即设置了flex-wrap: wrap，且内容确实折行） - 对
justify-content：单行或多行都行，只要主轴上有剩余空间
align-content: space-between 生效的完整条件
这个属性只在**多行 flex 容器**中起作用，且需同时满足：
立即学习“前端免费学习笔记（深入）”；
- 容器设了
display: flex和flex-wrap: wrap - 子元素总高度（或总宽度，取决于方向）小于容器在交叉轴的可用尺寸
- 容器显式设了高度（比如
height: 400px），否则可能塌缩导致无空间可分配
例如垂直等距排列三行按钮：
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 300px; /* 必须设，否则 align-content 无效 */
align-content: space-between;
}更稳妥的垂直等距方案：用 flex-direction: column + justify-content
多数场景下，想垂直排布就直接走列布局，逻辑更直白，兼容性也好：
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px; /* 同样需要固定高度 */
}注意点：
- 如果子项本身有
margin，会干扰间距计算，建议统一用 padding 或留空 - IE10/11 对
justify-content: space-between在 column 方向支持不一致，若需兼容，改用margin-top: auto和margin-bottom: auto手动推 - 真正“等距”指首尾到容器边缘的距离 = 相邻子项之间的距离，
space-between就是按这个规则算的，不是平均切分
最常被忽略的是容器高度没设——没高度，就没剩余空间，space-between 就只是个摆设。
