一文搞懂 Flex 弹性布局：为什么它成为现代 CSS 布局的首选？

学习 CSS 的时候，经常会听到一句话：

不会 Flex，就不会写页面。

刚开始学习的时候，我一直很好奇：

• 什么是弹性布局？
• 为什么大家都推荐用 Flex？
• flex: 1 到底是什么意思？
• flex-grow、flex-shrink、flex-basis 又分别有什么作用？

这篇文章主要记录一下自己的学习过程，希望能帮助和我一样刚开始学习前端布局的同学。

---

什么是 Flex？

Flex，全称 Flexible Box（弹性盒子）。

它是 CSS 提供的一种现代布局方案，用来更加方便地排列页面中的元素。

相比传统的：

• 浮动布局（float）
• 定位布局（position）

Flex 使用起来更加简单，也更适合响应式页面开发。

一句话理解：

Flex 就是一种让子元素能够自动排列、自动伸缩的布局方式。

---

如何开启 Flex 布局？

只需要给父元素设置：

display: flex;

例如：

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

.container{
    display:flex;
}

此时：

三个子元素就会自动排列在一行。

---

Flex 的默认排列方向

Flex 开启以后：

默认会把子元素放到：

主轴（Main Axis）

默认情况下：

主轴就是：

X 轴（从左到右）

布局效果：

┌───────────────────────────┐
│ A    B    C               │
└───────────────────────────┘

如果需要改成竖直方向：

可以使用：

flex-direction: column;

这样：

主轴就变成了：

Y 轴

---

flex-grow：控制放大

当父容器还有剩余空间时。

子元素默认不会自动放大。

例如：

父容器：

1000px

三个子元素：

100px

100px

100px

总共：

300px

还剩：

700px

如果：

flex-grow:1;

三个子元素就会：

按照比例分配剩余空间。

例如：

.item{
    flex-grow:1;
}

最终：

三个元素都会变宽。

---

按比例放大

例如：

.item1{
    flex-grow:1;
}

.item2{
    flex-grow:2;
}

.item3{
    flex-grow:1;
}

比例就是：

1 : 2 : 1

剩余空间：

会按照：

25%

50%

25%

进行分配。

---

flex-shrink：控制缩小

当父容器空间不足时。

Flex 默认会压缩子元素。

例如：

父容器：

300px

三个子元素：

150px

150px

150px

总宽：

450px

明显放不下。

如果：

flex-shrink:1;

Flex 会自动：

按比例缩小所有子元素。

如果：

flex-shrink:0;

表示：

禁止缩小。

此时：

可能会出现滚动条。

---

flex-basis：默认大小

flex-basis 可以理解成：

子元素的初始宽度。

例如：

.item{
    flex-basis:200px;
}

表示：

Flex 在计算布局之前：

先认为：

每个元素宽度都是 200px。

然后：

再结合：

• grow
• shrink

计算最终大小。

---

flex 简写

平时最常见的是：

flex:1;

实际上：

完整写法是：

flex-grow

flex-shrink

flex-basis

例如：

flex:0 0 200px;

等价于：

flex-grow:0;

flex-shrink:0;

flex-basis:200px;

意思就是：

宽度固定 200px。

既不放大。

也不缩小。

---

flex-wrap：允许换行

默认情况下：

Flex 所有子元素都会：

挤在同一行。

如果空间不足：

默认不会换行。

例如：

display:flex;

效果：

□□□□□□□□□□□□

如果：

flex-wrap:wrap;

表示：

空间不足时

允许自动换行。

布局：

□□□□

□□□□

□□□□

对于：

商品列表。

图片墙。

标签布局。

都非常有用。

---

三栏布局

Flex 最经典的应用之一：

就是：

左侧菜单

中间内容

右侧工具栏

例如：

┌──────────────────────────────┐
│200px│     自适应     │200px│
└──────────────────────────────┘

实现方式：

左右固定：

left{
    width:200px;
}

right{
    width:200px;
}

中间：

center{
    flex:1;
}

其中：

flex:1

表示：

自动占满剩余空间。

这也是 Flex 最常见的使用场景。

---

为什么会调整 HTML 顺序？

很多网站：

例如：

新闻网站。

博客。

搜索引擎。

都会优先加载：

主体内容。

原因：

主体内容最重要。

因此：

HTML 可以写成：

<main></main>

<aside></aside>

<aside></aside>

但是：

页面展示：

希望变成：

左

中

右

这时候：

可以使用：

order:-1;

改变：

视觉顺序。

例如：

.left{
    order:-1;
}

最终：

虽然：

HTML 中：

主体内容最先加载。

但是：

页面依然能够显示：

左侧

主体

右侧

既兼顾了：

SEO。

又兼顾了：

页面布局。

---

我的理解

学习 Flex 后，我最大的感受就是：

以前使用：

• float
• position

布局时。

需要考虑很多问题：

• 清除浮动
• 高度塌陷
• 定位计算

而 Flex：

只需要：

display:flex;

很多布局问题就能轻松解决。

尤其是在：

• 导航栏
• 卡片布局
• 后台管理系统
• 三栏布局
• 响应式页面

Flex 已经成为现代前端开发中最常用的布局方式。

---

总结

一句话记住今天的内容：

Flex（Flexible Box）是一种现代 CSS 布局方案。

它默认让子元素沿主轴排列，并提供了灵活的放大、缩小、换行等能力。

其中：

flex-grow：控制放大比例；

flex-shrink：控制缩小比例；

flex-basis：设置初始大小；

flex-wrap：控制是否换行；

flex：是 grow、shrink、basis 的简写。

掌握 Flex，基本可以完成日常绝大多数页面布局开发。