CSS弹性布局（Flexbox）学习笔记：从零开始搞懂弹性布局

前言：最近在学CSS弹性布局，发现这东西真的太好用了！以前写布局各种float、各种clear，现在用Flex基本上几句代码就搞定。这篇笔记把学习过程中踩过的点和觉得有用的知识整理出来，希望能帮到同样在学Flex的同学。

一、什么是弹性布局

弹性布局（Flexible Box），简称 Flexbox，是 CSS3 中提供的一种更加灵活的布局方式。传统布局我们用 display: block 做垂直排列、display: inline-block 做水平排列、float 做浮动布局，但这些方式在应对复杂的对齐、等分、居中需求时往往捉襟见肘。Flex 布局的出现就是为了解决这些痛点。

使用非常简单，只需要在父容器上加一行代码：

css 复制代码

.container {
  display: flex;
}

加完这行之后，这个容器就变成了一个弹性容器 ，它里面的所有直接子元素自动变成弹性子项 ，默认会沿着水平方向(主轴) 一行排列。

html 复制代码

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

css 复制代码

.container {
  display: flex;
  border: 1px dotted #000;
}
.box {
  width: 200px;
  height: 100px;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
}
.box:nth-child(1) { background-color: #ee4d4d; }
.box:nth-child(2) { background-color: #bdf046; }
.box:nth-child(3) { background-color: #35e88c; }

效果说明： 三个 200px 宽的盒子紧挨着水平排列在容器中，容器宽度由内容撑开。

二、主轴与交叉轴

理解 Flex 布局的关键在于理解两个轴：

主轴（main axis）：默认是水平方向，子项沿着主轴排列。
交叉轴（cross axis）：默认是垂直方向，和主轴垂直。

这两个轴的概念很重要，后面讲的很多属性都是围绕"沿着主轴"还是"沿着交叉轴"来设置的。

三、控制子项放大：flex-grow

flex-grow 用来控制子项在父容器有剩余空间 时如何放大。默认值是 0，表示不放大。设置为 1 表示等分剩余空间。

css 复制代码

.container {
  display: flex;
  border: 1px dotted #000;
}
.box {
  flex-grow: 1;
  height: 100px;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
}
.box:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
}

上面的代码中，第 1 个和第 3 个子项 flex-grow: 1，会平分剩余空间；第 2 个子项固定 200px 宽度，不参与放大。

效果说明： 三个盒子填满整行，中间的绿色盒子固定 200px，红色和绿色盒子等分剩下的空间。

四、控制子项缩小：flex-shrink

flex-shrink 用来控制子项在父容器空间不足时如何缩小。默认值是 1，表示空间不够时等比例缩小。设置为 0 则不缩小，保持原始尺寸。

在上面的例子中，第 2 个子项设置了 flex-shrink: 0，所以即使容器变窄，它也始终保持 200px 不被压缩。

五、设置子项默认宽度：flex-basis

flex-basis 用来设置子项在主轴方向上的初始大小，优先级比 width 高。可以理解成"在分配多余空间之前，这个子项的理想尺寸"。

css 复制代码

.box:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
}

这三行组合起来的意思是：不放大、不缩小、固定 200px。其实有一个简写方式：

css 复制代码

.box:nth-child(2) {
  flex: 0 0 200px;
}

flex 是 flex-grow、flex-shrink、flex-basis 三个属性的简写，顺序不能乱。这个简写在实战中非常常用。

六、允许换行：flex-wrap

默认情况下，Flex 容器会让所有子项挤在一行里。如果子项太多超出容器宽度，就会被压缩。flex-wrap: wrap 可以让子项在空间不足时自动换行。

html 复制代码

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

css 复制代码

.container {
  display: flex;
  border: 1px dotted #000;
  flex-wrap: wrap;
}
.box {
  width: 200px;
  height: 100px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box:nth-child(1) { background-color: #ee4d4d; }
.box:nth-child(2) { background-color: #bdf046; }
.box:nth-child(3) { background-color: #35e88c; }

效果说明： 9 个 200px 宽的盒子在容器中自动换行排列，一行放不下的会排到下一行。

七、实战：三栏布局

学 Flex 布局，一个经典应用场景就是三栏布局------左右两侧固定宽度（比如侧边栏、广告位），中间主体内容自适应剩余空间。

html 复制代码

<div class="page">
  <div class="content">主体内容</div>
  <div class="left">广告</div>
  <div class="right">广告</div>
</div>

css 复制代码

.page {
  height: 500px;
  display: flex;
}
.left, .right {
  flex: 0 0 200px;
  background-color: aquamarine;
}
.content {
  flex: 1;
  background-color: #eb8989;
}
.left {
  order: -1;
}

效果说明： 中间粉色区域自适应宽度，左右两个青色区域各固定 200px。

这里有一个有趣的细节------HTML 中 content 写在最前面，但实际显示时它在中间。这是因为用到了 order 属性。

八、控制排列顺序：order

order 属性可以改变子项的排列顺序，默认值是 0，数值越小越靠前。

css 复制代码

.left {
  order: -1;
}

为什么要把主体内容的 HTML 写在前面？出于 SEO 和无障碍访问的考虑，主体内容应该先被浏览器加载和解析 ，这样搜索引擎爬虫和屏幕阅读器能优先获取核心内容。至于视觉上的左右位置，交给 CSS 的 order 来调整就好。

九、知识点速查表

属性	作用	默认值
`display: flex`	开启弹性布局	---
`flex-grow`	空间有剩余时是否放大	`0`
`flex-shrink`	空间不足时是否缩小	`1`
`flex-basis`	子项初始尺寸	`auto`
`flex`	三者简写 `grow shrink basis`	`0 1 auto`
`flex-wrap`	是否允许换行	`nowrap`
`order`	排列顺序，越小越靠前	`0`

十、总结

Flex 布局的核心思路其实就是：父容器控制方向和对齐，子项控制大小和弹性。搞清楚主轴和交叉轴的概念，剩下的就是属性的组合搭配。三栏布局、导航栏、卡片列表、居中对齐......这些常见布局需求用 Flex 都能轻松实现。

建议自己也动手敲一遍上面的代码，改改属性值看看效果变化，理解会比光看文章深刻很多。