当前位置：首页 > 文章列表 > 文章 > 前端 > Flexbox对齐与间距详解：justify-content和align-items教程

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

2026-01-18 23:33:47 0浏览收藏

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 失去作用对象