Flexbox：主轴与交叉轴、justify/align、gap、flex-grow

掌握 Flexbox 的两条轴，在日常布局中对齐、居中并分布你的元素。

9 分钟 · 3 题

导航栏、一排卡片、对齐的表单：Flexbox 是一维布局的日常工具。一切都建立在两条轴上：主轴（由 flex-direction 决定，默认水平）和与之垂直的交叉轴。justify-content 沿主轴分布元素；align-items 沿交叉轴对齐元素。记住这对搭档：它能解决大部分场景。我们来看一个经典的导航栏。

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

几条声明就能把这个列表变成专业的导航栏：space-between 把 logo 推到左边、按钮推到右边，align-items: center 让高度不同的元素垂直对齐，而 gap 为链接之间留出间距，无需管理任何外边距。

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

思考练习：如果你把 .navbar 改成 flex-direction: column，justify-content: space-between 会做什么？它现在会沿垂直方向分布元素，因为主轴已经旋转了。这就是 Flexbox 的经典陷阱：justify-content 和 align-items 指的不是“水平”和“垂直”，而是“主轴”和“交叉轴”。另一个必知的用例：把内容完美居中。

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow 会把剩余的空闲空间分配给各个元素。具体场景：一个带有固定侧边栏、内容填满其余空间的布局。flex: 0 0 240px 锁定侧边栏（它既不放大也不收缩），而 flex-grow: 1 让内容吸收掉所有可用空间。

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

知识检测

确认你已牢记本课的重点内容。

1. 在 flex-direction: column 下，justify-content 控制什么？
   • 元素的水平对齐
   • 垂直对齐，因为主轴已经变成垂直方向
   • 文本行之间的间距
2. 哪种组合能让一个元素在 flex 容器中同时水平和垂直居中？
   • text-align: center 和 vertical-align: middle
   • justify-content: center 和 align-items: center
   • 在容器上使用 margin: 0 auto
3. 在一个 flex 容器中，.a 设置了 flex-grow: 2，.b 设置了 flex-grow: 1。会发生什么？
   • .a 始终正好是 .b 宽度的两倍
   • .a 分到的剩余空闲空间是 .b 的两倍
   • .b 会被隐藏，让位给 .a