大家好，我是树哥！
前面一篇文章整体介绍了 CSS 的布局知识，其中说到 float 布局是 CSS 不断完善的副产物。而在 2023 年的今天，flex 这种布局方式才是未来！那么今天我们就来学习下 flex 弹性布局。
什么是 Flex 布局？
在经过了长达 10 年的发展之后，CSS3 才终于迎来了一个简单好用的布局属性 —— flex。Flex 布局又称弹性布局，它使用 flexbox 属性使得容器有了弹性，可以自动适配各种设备的不同宽度，而不必依赖于传统的块状布局和浮动定位。
举个很简单地例子，如果我们想要实现一个很简单左侧定宽，右侧自适应的导航布局，如下图所示。
在没有 flex 之前，我们的代码是这么写的。
<div>
<h1>4.1 两栏布局 - 左侧定宽、右侧自适应 - float</h1>
<div class="container">
<div class="left41"></div>
<div class="right41"></div>
</div>
</div>
/** 4.1 两栏布局 - 左侧定宽、右侧自适应 - float **/
.left41 {
float: left;
width: 300px;
height: 500px;
background-color: pink;
}
.right41 {
width: 100%;
height: 500px;
background-color: aquamarine;
}
这种方式不好的地方在于，我们还需要去理解 float 这个概念。一旦需要理解 float 这个概念，我们就会拖出一大堆概念，例如文档流、盒子模型、display 等属性（虽然这些东西确实应该学）。但对于 flex 来说，它就很简单，只需要设置一个伸缩系数即可，如下代码所示。
<div>
<h1>4.2 两栏布局 - 左侧定宽、右侧自适应 - flex</h1>
<div class="container42">
<div class="left42"></div>
<div class="right42"></div>
</div>
</div>
.container42 {
display: flex;
}
.left42 {
width: 300px;
height: 500px;
background-color: pink;
}
.right42 {
flex: 1;
width: 100%;
height: 500px;
background-color: aquamarine;
}
上面的代码里，我们只需要将父级容器设置为 flex 展示形式（display: flex），随后在需要自动伸缩的容器里设置属性即可。上面代码中的 flex: 1 表示其占据所有其他当行所剩的空间。通过这样的方式，我们非常方便地实现了弹性布局。
当然，上面只是一个最简单的例子，甚至还不是很能体现出 flex 的价值。flex 除了在响应式布局方面非常方便之外，它在对齐等方面更加方便，能够极大地降低学习成本、提高工作效率。
Flex 核心概念
对于 Flex 布局来说，其有几个核心概念，分别是：主轴与交叉轴、起始线和终止线、Flex 容器与 Flex 容器项。
主轴和交叉轴
在 Flex 布局中有一个名为 flex-direction 的属性，可以取 4 个值，分别是：
- row
- row-reverse
- column
- column-reverse
如果你选择了 row 或者 row-reverse，那么主轴（Main Axis）就是横向的 X 轴，交叉轴（Cross Axis）就是竖向的 Y 轴，如下图所示。
如果你选择了 column 或者 column-reverse，那么主轴（Main Axis）就变成是竖向的 Y 轴，交叉轴（Cross Axis）就是横向的 X 轴，如下图所示。
起始线和终止线
过去，CSS 的书写模式主要被认为是水平的，从左到右的。但现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写的。
对于不同的语言来说，其书写方向不同，例如英文是从左到右，但阿拉伯文则是从右到左。那么对于这两种语言来说，其xx会有所不同 TODO。举个简单的例子，如果 flex-direction 是 row ，并且我是在书写英文。由于英文是从左到右书写的，那么主轴的起始线是左边，终止线是右边，如下图所示。
但如果我在书写阿拉伯文，由于阿拉伯文是从右到左的，那么主轴的起始线是右边，终止线是左边，如下图所示。
在 Flex 布局中，起始线和终止线决定了 Flex 容器中的 Flex 元素从哪个方向开始排列。 举个简单例子，如果我们通过 direction: ltr 设置了文字书写方向是从左到右，那么起始线就是左边，终止线就是右边。此时，如果我们设置的 flex-direction 值是 row，那么 Flex 元素将会从左到右开始排列。但如果我们设置的 flex-direction 值是 row-reverse，那么 Flex 元素将会从右到左开始排列。
在上面的例子中，交叉轴的起始线是 flex 容器的顶部，终止线是底部，因为两种语言都是水平书写模式。但如果有一种语言，它的书写形式是从底部到顶部，那么当设置 flex-direction 为 column 或 column-reverse 时，也会有类似的变化。
Flex 容器与 Flex 元素
我们把一个容器的 display 属性值改为 flex 或者 inline-flex 之后，该容器就变成了 Flex 容器，而容器中的直系子元素就会变为 flex 元素。如下代码所示，parent 元素就是 Flex 容器，son 元素就是 Flex 元素。
<style>
#parent {
display: flex;
}
</style>
<div id="parent">
<div id="son"></div>
</div>
Flex 核心属性
对于 Flex 来说，它有非常多的用法，但核心属性却相对较少。这里我只简单介绍几个核心属性，如果你想了解更多 Flex 的属性，可以去 Mozilla 官网查询，这里给个传送门：flex 布局的基本概念 - CSS：层叠样式表 | MDN。
对于 Flex 布局来说，其核心属性有如下几个：
- flex-direction 主轴方向
- flex 伸缩系数及初始值
- justify-content 主轴方向对齐
- align-items 交叉轴方向对齐
flex-direction 主轴方向
如上文所介绍过的，flex-direction 定义了主轴的方向，可以取 4 个值，分别是：
- row 默认值
- row-reverse
- column
- column-reverse
一旦主轴确定了，交叉轴也确定了。主轴和交叉轴与后续的对齐属性有关，因此弄懂它们非常重要！举个很简单的例子，如下的代码将展示下图的展示效果。
.box {
display: flex;
flex-direction: row-reverse;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
如果你将 flex-direction 改成 column-reverse，那么将会变成如下的效果，如下图所示。
flex 伸缩系数及初始值
前面说到 Flex 布局可以很方便地进行响应式布局，其实就是通过 flex 属性来实现的。flex 属性其实是 flex-grow、flex-shrink、flex-basis 这三个参数的缩写形式，如下代码所示。
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
/* 上面的设置等价于下面 flex 属性的设置 */
flex: 1 1 200px;
在考虑这几个属性的作用之前，需要先了解一下 可用空间 available space 这个概念。这几个 flex 属性的作用其实就是改变了 flex 容器中的可用空间的行为。
假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下，flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。
如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。
flex-basis
flex-basis 属性用于设置 Flex 元素的大小，其默认值是 auto。此时浏览器会检查元素是否有确定的尺寸，如果有确定的尺寸则用该尺寸作为 Flex 元素的尺寸，否则就采用元素内容的尺寸。
flex-grow
flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。
举个例子，上面的例子中有 a、b、c 个 Flex 元素。如果我们给上例中的所有元素设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。
但很多时候，我们可能都需要按照比例来划分剩余的空间。此时如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有 1/4（各 50px）。
flex-shrink
flex-grow 属性是处理 flex 元素在主轴上增加空间的问题，相反 flex-shrink 属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素 flex-shrink 属性设置为正整数，以此来缩小它所占空间到 flex-basis 以下。
与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
justify-content 主轴方向对齐
justify-content 属性用来使元素在主轴方向上对齐，它的初始值是 flex-start，即元素从容器的起始线排列。justify-content 属性有如下 5 个不同的值：
- flex-start：从起始线开始排列，默认值。
- flex-end：：从终止线开始排列。
- center：在中间排列。
- space-around：每个元素左右空间相等。
- space-between：把元素排列好之后，剩余的空间平均分配到元素之间。
各个不同的对齐方式的效果如下图所示。
flex-start：
flex-end：
center：
space-around：
space-between：
align-items 交叉轴方向对齐
align-items 属性可以使元素在交叉轴方向对齐，它的初始值是 stretch，即拉伸到最高元素的高度。align-items 属性有如下 5 个不同的值：
- stretch：拉伸到最高元素的高度，默认值。
- flex-start：按 flex 容器起始位置对齐。
- flex-end：按 flex 容器结束为止对齐。
- center：居中对齐。
- baseline：始终按文字基线对齐。
各个不同的对齐方式的效果如下图所示。
stretch：
flex-start：
flex-end：
center：
要注意的事，无论 align-items 还是 justify-content，它们都是以主轴或者交叉轴为参考的，而不是横向和竖向为参考的，明白这点很重要。
Flex 默认属性
由于所有 CSS 属性都会有一个初始值，所以当没有设置任何默认值时，flex 容器中的所有 flex 元素都会有下列行为：
- 元素排列为一行 (flex-direction 属性的初始值是 row)。
- 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸，但是可以缩小。
- 元素被拉伸来填充交叉轴大小。
- flex-basis 属性为 auto。
- flex-wrap 属性为 nowrap。
弄清楚 Flex 元素的默认值有利于我们更好地进行布局排版。
实战项目拆解
看了那么多的 Flex 布局知识点，总感觉干巴巴的，是时候来看看别人在项目中是怎么用的了。
上面是我在 CodePen 找到的一个案例，这样的一个布局就是用 Flex 布局来实现的。通过简单的分析，其实我们可以拆解出其 Flex 布局方法，大致如下图所示。
首先整体分为两大部分，即导航栏和内容区域，这部分的主轴纵向排列的（flex-direction: column），如上图红框部分。随后在内容区域，又将其分成了左边的导航栏和右边的内容区域，此时这块内容是横向排列的（flex-direction: row），如下上图蓝框部分。
剩下的内容布局也大致类似，其实就是无限套娃下去。由于偏于原因，这里就不继续深入拆解了，大致的布局思路已经说得很清楚了。
有了 Flex 布局之后，貌似布局也变得非常简单了。但纸上得来终觉浅，还是得自己实际动手练练才知道容易不容易，不然就变成纸上谈兵了！
总结
看到这里，关于 Flex 布局的核心点就介绍得差不多了。掌握好这几个核心的知识点，开始去实践练习基本上没有什么太大的问题了。剩下的一些比较小众的属性，等用到的时候再去查查看就足够了。
接下来更多的时间，就是找多几个实战案例实践，唯有实践才能巩固所学知识点。后面有机会，我将分享我在 Flex 布局方面的项目实践。
如果这篇文章对你有帮助，记得一键三连支持我！