小白也能懂的前端 flex:1 详解

前端大白话之 flex:1

通俗易懂的大白话。
你懂了吗？懂了。

基本概念

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto（后两个属性可选）。

.item {
	flex: none | [ < "flex-grow" > < "flex-shrink" >? || < "flex-basis" > ];
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex-grow：

定义项目的的放大比例

默认为 0，即 即使存在剩余空间，也不会放大；
所有项目的 flex-grow 为 1：等分剩余空间（自动放大占位）；
flex-grow 为 n 的项目，占据的空间（放大的比例）是 flex-grow 为 1 的 n 倍。

flex-shrink：

定义项目的缩小比例

默认为 1，即 如果空间不足，该项目将缩小； 所有项目的 flex-shrink 为 1：当空间不足时，缩小的比例相同； flex-shrink 为 0：空间不足时，该项目不会缩小； flex-shrink 为 n 的项目，空间不足时缩小的比例是 flex-shrink 为 1 的 n 倍。

flex-basis:

定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间

默认值为 auto，即 项目原本大小；
设置后项目将占据固定空间。

大白话

当一个容器设置display:flex变成一个flex容器后，如果容器没有被占满，换言之有剩余空间，则flex-grow起作用。
相反，若空间不足，则flex-shrink起作用。
在计算放大或缩小比例时，要根据flex-basis的值来计算比例。

---

举个例子：

<div class="parent">
	<div class="item-1"></div>
	<div class="item-2"></div>
	<div class="item-3"></div>
</div>

<style type="text/css">
	.parent {
		display: flex;
		width: 600px;
	}
	.parent > div {
		height: 100px;
	}
	.item-1 {
		width: 140px;
		flex: 2 1 0%;
		background: blue;
	}
	.item-2 {
		width: 100px;
		flex: 2 1 auto;
		background: darkblue;
	}
	.item-3 {
		flex: 1 1 200px;
		background: lightblue;
	}
</style>

主轴上父容器总尺寸为 600px。

子元素的总基准值是：0% + auto + 200px = 300px，其中

• 0% 即 0 宽度

• auto 对应取原尺寸即 100px

故剩余空间为

600px - 300px = 300px

伸缩放大系数之和为

2 + 2 + 1 = 5

剩余空间分配如下

item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px

各项目最终宽度为：

item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px

当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设。

而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间。

---

怎么用？

flex 为一个非负数字 n：
该数字为 flex-grow 的值

flex ：n；
/* 等同于: */
flex-grow ：n；
flex-shrink ：1；
flex-basis ：0%；

flex 为两个非负数字 n1，n2:
分别为 flex-grow 和 flex-shrink 的值

flex ：n1 n2;
/* 等同于: */
flex-grow ：n1；
flex-shrink ：n2；
flex-basis ：0%；

flex 为一个长度或百分比 L：
视为 flex-basis 的值

flex : L;
/* 等同于: */
flex-grow ：1；
flex-shrink ：1；
flex-basis ：L；

flex 为一个非负数字 n 和一个长度或百分比 L：
分别为 flex-grow 和 flex-basis 的值

flex ：n L；
/* 等同于: */
flex-grow：n；
flex-shrink：1；
flex-basis：L;

可以发现，flex-grow 和 flex-shrink 在 flex 属性中不规定值则为 1，flex-basis 为 0%。

flex:1

所以，flex ：1 即为 flex-grow ：1。
经常用作自适应布局，将父容器的 display：flex，侧边栏大小固定后，将内容区 flex：1，内容区则会自动放大占满剩余空间。

flex:1和flex:auto的区别

flex:1

flex-grow : 1;
flex-shrink : 1;
flex-basis : 0%;

flex:auto

flex-grow : 1;
flex-shrink : 1;
flex-basis : auto;

参考资料：

阮一峰老师的 blog
www.ruanyifeng.com/blog/2015/0…

网络资源
www.cnblogs.com/chris-oil/p…
www.cnblogs.com/LangZ-/p/12…

以上，如侵必删！