详解 Flexible Box 中的 flex 属性

导读：

弹性盒子是 CSS3 的一种布局模式，一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式。其中 flex 属性用于指定弹性子元素如何分配空间。

flex 属性的值

flex-grow flex-shrink flex-basis (flex-grow为扩展比率,flex-shrink为收缩比率,flex-basis为默认基准值)
auto (计算值为 1 1 auto)
initial (计算值为 0 1 auto)
none (计算值为 0 0 auto)
inherit (从父元素继承)

所以之前你也许看过：

flex: 0 1 auto;

这样的缩写，它依次包含 flexbox 的 3 个属性，依次是 flex-grow(默认值：0),flex-shrink(默认值：1),flex-basis。本文主要讲解 flexbox 的这三个属性，需要对 flexbox 具有初步的了解。

flex-basis

flex-basis 属性指定了 flex 元素在主轴方向上的初始大小，决定了可伸缩的空间大小(剩余空间)。所以要知道剩余空间的大小，必须先知道 flex-basis 属性的值：

如果没有设置 flex-basis 属性，那么 flex-basis 的大小就是项目的 width 属性的大小。

如果没有设置 width 属性，那么 flex-basis 的大小就是项目内容(content)的大小。

flex-basis 与 flex-grow

首先我们创建一个宽为 1000px 的 flex 容器。然后通过给其子元素定义不同的 flex 属性值来查看它们的布局。

2 0 250px;

0 0 200px;

2 0 150px;

现在我们来计算设置 flex 属性不同值之后每个子元素的宽度。首先，我们来计算剩余空间：

剩余空间 = 容器大小 - 每个子元素的 flex-basis 值的总和

根据上面的例子，这里的 剩余空间 = 1000 - (250 + 200 + 150) = 400

然后剩余空间根据各子元素中 flex-grow 的值平均分配，所以子元素最终的宽度计算为：

每个子元素的最终空间 = 伸缩基准值 + 剩余空间 / (各子元素中 flex-grow) * 对应子元素的 flex-grow

此处第一子元素的宽度计算为：250 + 400/(2+0+2)*2 = 450。第二子元素的宽度计算为：200 + 400/(2+0+2)*0 = 200。第三子元素的宽度计算为：150 + 400/(2+0+2)*2 = 350

flex-basis 与 flex-shrink

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。flex-shrink 的计算方式与 flex-grow 大有不同，下面我们定义一个宽为 600px 的 flex 容器。然后通过给其子元素定义不同的 flex 属性值(默认宽度之和大于容器)来查看它们的布局。

2 2 200px;

0 1 400px;

2 1 200px;

现在我们要先计算的是负空间：

负空间 = 容器大小 - 每个子元素的 flex-basis 值的总和

在这里 负空间 = 600 - (200+400+200) = -200

其次将每个子元素的收缩比例值乘以各自对应的基准值，再把所得的积累加。

元素空间总和 = 元素一(200) * 元素一的收缩比例(2) + 元素二(400) * 元素二的收缩比例(1) + 元素三(200) * 元素三的收缩比例(1) = 1000

在计算各项的收缩因素(以元素三举例)：

各元素收缩因素(三) = 各元素收缩系数(1) * 对应元素的基准值(200) / 元素空间总和(1000) = 0.2

最后计算出各元素收缩的值，从而得到最终的宽度(依然以元素三举例)：

各元素收缩值(三) = 对应的收缩因素(0.2) * 负空间(-200) = -40 各元素最终宽度(三) = 基准值(200) + 对应元素的收缩值(-40) = 160

如果各子元素的的 flex-basis 设置为 0 (width也可以)，那么计算剩余空间的时候将不会为子容器预留空间。最后呈现出的布局，各子元素空间根据 flex-grow 成比例关系。

flex 属性的运用

有时候我们会需要这样的布局，即让一个 div 永远出现在界面的最底部：当页面内容不足以布满整个屏幕时，该 div 固定在屏幕底部，当内容增加超过页面时，该 div 又固定在页面内容的底部。

实现这个布局的方法有多种，这里介绍一下如何使用弹性盒子的 flex 属性来实现。

HTML结构：

<body>

	<div class="content"></div>

	<div class="footer"></div>

</body>

CSS结构：

body {

	display: -webkit-flex;

	display: flex;

	-webkit-flex-direction: column;

	flex-direction: column;

	min-height: 100vh;

}

.content {

    -webkit-flex: 1;

	flex: 1;

}

写在最后

到此这三个属性之间的计算也就结束了，写得可能有些乱，仅供参考吧，也算作是自己的学习笔记，如果文中有什么错误，欢迎大家指正，愿与大家在交流之中共同进步，愈激烈，愈深刻。感谢。