Flexbox对齐与间距详解：justify-content和align-items教程

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS Flexbox对齐与间距详解：justify-content和align-items使用教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

justify-content 控制主轴（默认水平）子元素间距，仅对 flex 容器生效；align-items 控制交叉轴（默认垂直）子元素对齐，二者常组合实现居中等布局效果。

justify-content 控制主轴上的子元素间距

这个属性只在设置了 display: flex 的容器上生效，作用是沿主轴（默认是水平方向）分配子元素之间的空白。它不控制单个子项内部对齐，也不影响交叉轴。

• justify-content: flex-start —— 默认值，所有子项靠主轴起点对齐（左对齐）
• justify-content: center —— 居中，但注意：这是**容器内所有子项整体居中**，不是每个子项自己居中
• justify-content: space-between —— 首尾子项贴住容器边缘，中间等距分布；如果只有两个子项，效果最直观
• justify-content: space-around —— 每个子项两侧留出相等空间，视觉上比 space-between 更“松散”
• justify-content: space-evenly —— 所有间隙（包括首尾到容器边缘）完全相等；IE 不支持

常见错误：给子项单独设 margin: auto 试图替代 justify-content，结果发现没反应——因为 margin: auto 在主轴上只在特定条件下生效（比如只有一个子项且容器有明确宽度），不如直接用 justify-content 可控。

align-items 控制交叉轴上的子元素对齐

它决定所有子项在交叉轴（默认是垂直方向）如何对齐。注意：这个对齐是统一的，不能让某个子项单独偏移，除非用 align-self 覆盖。

• align-items: stretch —— 默认值，子项在交叉轴方向拉伸填满容器高度（前提是没设 height 或 min-height）
• align-items: center —— 所有子项在交叉轴居中（比如让一行按钮垂直居中）
• align-items: flex-start —— 全部顶对齐（对行内布局来说就是“基线对齐”的近似效果）
• align-items: baseline —— 按文本基线对齐，适合含文字的混合子项（如图标+文字按钮），但兼容性略差于 center

容易被忽略的一点：如果子项本身设置了 height 或 min-height，align-items: stretch 就不会拉伸它；此时若想强制居中，必须显式设 align-items: center。

justify-content 和 align-items 同时用的典型场景

最常用组合是 justify-content: center + align-items: center，实现真正的“绝对居中”一个子元素（比如加载动画、空状态提示）。但这要求容器有明确尺寸（如 height: 100vh），否则可能看不出效果。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.loader {
  width: 40px;
  height: 40px;
  background: #007bff;
}

另一个高频场景是导航栏：水平排列用 justify-content: space-between，再加 align-items: center 让 logo 和菜单按钮垂直居中。这时要注意子项如果有 padding 或 line-height，会影响实际对齐位置，最好统一用 box-sizing: border-box。

为什么有时候 align-items 没生效？

最常见原因有三个：

• 父容器没设 display: flex，或者写成了 inline-flex 但容器宽度不够导致换行，此时交叉轴变成水平，align-items 行为就变了
• 子项用了 float 或 position: absolute，这些元素会脱离 flex 格局，align-items 对它们无效
• 容器本身没有高度（比如子项全是 float 或 inline 元素撑不起高度），导致交叉轴“不存在”，align-items 失去作用对象

调试建议：临时加 outline: 1px solid red 到容器和子项，看实际渲染区域是否符合预期；再检查 computed styles 中 display 和 height 是否如你所想。

到这里，我们也就讲完了《Flexbox对齐与间距详解：justify-content和align-items教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！