从零理解 CSS 弹性布局：轻松掌控页面元素排布

你好，我是一个 JS 新手，也是掘金新人。这篇文章记录了我在学习 CSS 弹性布局（Flex Layout） 过程中的理解与总结。如果你和我一样，刚接触前端、不太适应传统布局方式，那么 Flex 很可能会成为你的"救星"。

在正式开始之前，你可以把 Flex 布局想象成一条可以自由伸缩的橡皮筋：父容器是一整根橡皮筋，子元素就是绑在上面的物品。空间多了就被拉开，空间少了就被挤在一起，而且还能控制它们的排列方式。

一、什么是弹性布局？

在 CSS 中，只需要一行代码，就可以让一个容器变成"弹性容器"：

js 复制代码

.box {
  display: flex;
}

当我们给父元素设置 display: flex 后，这个元素就拥有了 弹性容器 的身份，它的直接子元素就变成了 弹性子元素 。

可以这样理解：一旦开启了 flex，浏览器就不再把子元素当成"死板的盒子"，而是当成"会思考的成员"，可以根据空间自动调整。

二、主轴与交叉轴：Flex 的核心概念

Flex 布局中有两个非常重要的概念：主轴与交叉轴

默认情况下：

主轴是 水平方向（x 轴）
交叉轴是 垂直方向（y 轴）

你可以把主轴想象成"队伍前进的方向"，子元素默认会沿着这条路排队。

修改主轴方向

通过 flex-direction，我们可以改变主轴的方向：

js 复制代码

.box {
  display: flex;
  flex-direction: column;
}

当设置为 column 时，主轴就从"横着走"变成了"竖着走"，而交叉轴则自动变成水平方向。就像一群人，本来是横排站着拍照，现在变成纵向排队。

三、主轴与交叉轴上的对齐方式

3.1 justify-content：控制主轴方向的排列

justify-content 决定了子元素 在主轴上的分布方式：

js 复制代码

.box {
  display: flex;
  justify-content: space-evenly;
}

常见取值包括：

flex-start
center
space-between
space-around
space-evenly

3.2 align-items：控制交叉轴方向的排列

js 复制代码

.box {
  display: flex;
  align-items: center;
}

如果说 justify-content 是"左右怎么站"，那么 align-items 就是"上下怎么站"。

下面是一个常见的居中示例：

js 复制代码

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

js 复制代码

.box {
  width: 800px;
  height: 400px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

Flex 布局下的居中，就像把东西放在盒子正中央，不需要再计算一堆边距。

四、当空间不够用：换行与多轴线控制

4.1 flex-wrap：是否允许换行

默认情况下，Flex 子元素会被强行挤在一行里。如果希望空间不足时换行：

js 复制代码

.box {
  display: flex;
  flex-wrap: wrap;
}

4.2 align-content：多行之间的排列方式

当子元素换行后，就会出现"多根轴线"，此时可以使用 align-content：

js 复制代码

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

可以把 align-items 理解为"单行对齐"，而 align-content 是"多行整体怎么排"。

五、Flex 子元素的专属属性

Flex 不仅能控制父容器，还能精细地控制每一个子元素。

5.1 order：改变显示顺序

js 复制代码

.item:nth-child(1) {
  order: -1;
}

数值越小，排列越靠前。 就像排队时插队，但只是"视觉顺序"，不影响 HTML 结构。

5.2 flex-grow：空间有剩余时如何分配

js 复制代码

.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

浏览器会按照比例分配多余空间，就像按"饭量大小"分蛋糕。

5.3 flex-shrink：空间不足时如何缩小

js 复制代码

.item {
  flex-shrink: 1;
}

值越大，缩得越狠。

5.4 flex-basis 与 flex 简写

js 复制代码

.item {
  flex-basis: 200px;
}

/* 等价写法 */
.item {
  flex: 0 0 200px;
}

flex 是 flex-grow、flex-shrink、flex-basis 的集合。

5.5 align-self：单独控制某一个子元素

js 复制代码

.item:nth-child(2) {
  align-self: center;
}

就像一个人单独站到队伍中间，不影响其他人。

六、实战应用：三栏布局

Flex 非常适合经典的三栏布局：

js 复制代码

<div class="page">
  <div class="main">主体</div>
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

js 复制代码

.page {
  height: 200px;
  display: flex;
}
.left, .right {
  width: 200px;
}
.main {
  flex: 1;
}
.left {
  order: -1;
}

主体区域自适应，两侧固定宽度。

七、总结

Flex 布局的本质，是让布局变得"有弹性" 。你不再需要死记宽高、浮动、清除浮动，而是把注意力放在：

主轴方向
空间分配
对齐规则

当你真正理解了这些概念，Flex 就会从"难记的属性集合"，变成一个非常自然、顺手的布局工具。

如果你也是刚入门前端，希望这篇文章能帮你少走一些弯路。