CSS Flexbox 实战布局完全指南

从零掌握 Flexbox 弹性布局，学完就能写出现代化的响应式页面。 · 难度：入门 · +15XP

什么是 Flexbox？

想象你在收拾书桌。有些东西要横着放，有些要竖着放，还有些要居中对齐。Flexbox（弹性盒子）就是 CSS 里的"桌面整理大师"——它让你轻松控制元素的排列方向、对齐方式和空间分配。

在没有 Flexbox 的年代，前端开发者用 float、display: inline-block、甚至 <table> 来做布局。这些方法要么需要清除浮动，要么有空白间隙，要么语义不对。Flexbox 一举解决了这些问题。

第一步：开启 Flex 容器

你只需要一行 CSS：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<style>
.container {
  display: flex;
  gap: 10px;
}
.item {
  background: #3b82f6;
  color: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

效果：三个蓝色方块水平排列，间距 10px。这就是 Flexbox 的默认行为——flex-direction: row（从左到右）。

属性	作用	常用值
display: flex	开启弹性容器	flex | inline-flex
flex-direction	主轴方向	row | column | row-reverse | column-reverse
justify-content	主轴对齐	flex-start | center | flex-end | space-between | space-around | space-evenly
align-items	交叉轴对齐	stretch | flex-start | center | flex-end | baseline
gap	间距	10px | 1rem | 2em

主轴和交叉轴

理解 Flexbox 的关键是理解两条轴线：

• 主轴（Main Axis）：由 flex-direction 决定。默认是水平方向（row），改成 column 就是垂直方向。
• 交叉轴（Cross Axis）：垂直于主轴。如果主轴是水平的，交叉轴就是垂直的。

记忆口诀：justify-content 管主轴，align-items 管交叉轴。J 主 A 交，就像"主人交代"一样好记。

实战：导航栏

<nav style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #1e293b; color: white;">
  <div style="font-size: 1.5rem; font-weight: bold;">Logo</div>
  <div style="display: flex; gap: 2rem;">
    <a href="#" style="color: white; text-decoration: none;">首页</a>
    <a href="#" style="color: white; text-decoration: none;">课程</a>
    <a href="#" style="color: white; text-decoration: none;">关于</a>
  </div>
</nav>

这个导航栏用了三个 Flexbox 技巧：

1. display: flex 让 Logo 和链接横排
2. justify-content: space-between 让 Logo 靠左、链接靠右
3. align-items: center 让它们在垂直方向居中

弹性子元素：flex-grow / flex-shrink / flex-basis

这三个属性控制子元素如何分配剩余空间：

属性	含义	默认值
flex-grow	有多余空间时，放大比例	0（不放大）
flex-shrink	空间不足时，缩小比例	1（允许缩小）
flex-basis	初始大小	auto

最常用的简写：flex: 1 等于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。这让所有子元素平均分配父容器空间。

<div style="display: flex;">
  <div style="flex: 1; background: #3b82f6; padding: 20px;">1/3</div>
  <div style="flex: 2; background: #2563eb; padding: 20px;">2/3</div>
</div>

左边占 1/3，右边占 2/3。非常简单！

flex-wrap：换行

默认情况下 Flex 子元素不换行，会挤在一起。加上 flex-wrap: wrap 就能自动换行：

<div style="display: flex; flex-wrap: wrap; gap: 10px;">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
</div>

配合 flex: 1 1 300px（每个卡片最小 300px），就能实现自适应网格布局，不用写媒体查询！

动手试试

1. 基础练习：用 Flexbox 做一个水平居中的按钮组（3 个按钮，间距 12px，整体在页面水平居中）
2. 进阶应用：做一个"圣杯布局"——头部、底部固定高度，中间三栏（左右固定 200px，中间自适应），用 Flexbox 实现
3. 项目实战：把你之前写的 float 布局页面改成 Flexbox 实现，对比代码量减少了多少

接下来学什么？

掌握了 Flexbox 的一维布局，下一课我们学习 CSS Grid 二维布局——当你需要同时控制行和列时，Grid 是更好的选择。

📖 译自 freeCodeCamp The CSS Flexbox Handbook (CC BY 4.0)，有改编和扩充。