上下居中且等间距排列应使用 flex-direction: column、justify-content: space-evenly、align-items: center，并设置明确高度；space-evenly 实现真正等距，兼容性需注意。
flex 布局中上下居中 + 等间距排列的组合写法
直接给结论：justify-content: space-between 和 align-items: center 不能同时实现「上下居中」和「子元素等间距」——因为 space-between 会把首尾元素顶到容器边缘，垂直方向上根本不会“居中”；真正要的是垂直方向用 align-items: center，水平方向用 justify-content: space-evenly 或 space-around，取决于你对首尾间距的容忍度。
justify-content: space-evenly 是最接近“等间距”的选择
space-evenly 让所有相邻项之间的间隙相等，包括首项前、末项后。它比 space-between（首尾无边距）和 space-around（首尾边距是中间间隙的一半）更符合“视觉等距”直觉。
- 只在现代浏览器支持（Chrome 84+、Firefox 63+、Safari 14.1+），IE 完全不支持
- 如果必须兼容旧版 Safari 或 IE，得降级用
space-around+ 手动负 margin 抵消首尾多余边距 - 容器需有明确高度（比如
height: 100vh），否则align-items: center在块级上下文中可能无效
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
}
align-items: center 只控制交叉轴，别指望它拉平主轴间距
很多人误以为 align-items: center 能让子元素在水平方向也“居中对齐并等距”，其实它只作用于交叉轴（flex-direction: column 时是水平轴）。主轴（垂直方向）的间距完全由 justify-content 决定。
-
flex-direction: row时，align-items: center控制的是单行内各子项的垂直对齐，不影响左右间距 - 想让一行内多个按钮水平等距且整体垂直居中？那就该用
flex-direction: row+justify-content: space-evenly+align-items: center - 如果子项高度不一致，
align-items: center会让它们的中线对齐，不是底边或顶边
遇到 gap 不生效？检查是否用了老式写法或嵌套干扰
新版 gap 属性（如 row-gap: 1rem）在 flex 布局中已广泛支持，但它和 justify-content 是正交关系：前者控制项间空隙，后者控制整体分布。两者可共存，但容易踩坑：
立即学习“前端免费学习笔记（深入）”；
-
gap在flex-direction: column下等效于row-gap，不要写成column-gap - 父容器若设置了
align-items: stretch（默认值），而子项没设宽高，gap可能被压缩或渲染异常 - 某些 CSS 重置库（如 normalize.css）会覆盖
gap默认行为，建议显式声明gap: 1rem - 如果用了
flex-wrap: wrap，gap仍有效，但justify-content: space-evenly仅作用于当前行，多行时每行独立计算
最稳妥的组合仍是：display: flex + flex-direction + justify-content + align-items，gap 当作增强手段，不是替代方案。
