学习 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，基本可以完成日常绝大多数页面布局开发。
