flex:1什么意思

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

原理
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

推荐使用此简写属性，而不是单独写这三个属性。

flex-grow：定义项目的的放大比例；

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

不设置flex-grow时:

<div style="display:flex;border:1px solid #000;">
	<div style="height:100px;background-color:gray;">1</div>
	<div style="height:100px;background-color:red;">2</div>
	<div style="height:100px;background-color:gray;">3</div>
</div>

所有项目的flex-grow为1时:

<div style="display:flex;border:1px solid #000;">
	<div style="height:100px;background-color:gray;flex-grow:1;">1</div>
	<div style="height:100px;background-color:red;flex-grow:1;">2</div>
	<div style="height:100px;background-color:gray;flex-grow:1;">3</div>
</div>

flex-shrink：定义项目的缩小比例；

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

不设置flex-shrink时：

<div style="display:flex;border:1px solid #000;">
	<div style="height:100px;background-color:gray;width:200px;">1</div>
	<div style="height:100px;background-color:red;width:200px;">2</div>
	<div style="height:100px;background-color:gray;width:200px;">3</div>
</div>

第二个item的 flex-shrink为0时：

<div style="display:flex;border:1px solid #000;">
	<div style="height:100px;background-color:gray;width:200px;">1</div>
	<div style="height:100px;background-color:red;width:200px;flex-shrink:0;">2</div>
	<div style="height:100px;background-color:gray;width:200px;">3</div>
</div>

第一个item的 flex-shrink为1(默认值)，第二个item的 flex-shrink为0，第三个item的 flex-shrink为2时：

<div style="display:flex;border:1px solid #000;">
	<div style="height:100px;background-color:gray;width:200px;flex-shrink:1;">1</div>
	<div style="height:100px;background-color:red;width:200px;flex-shrink:0;">2</div>
	<div style="height:100px;background-color:gray;width:200px;flex-shrink:2;">3</div>
</div>

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值

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

第二个item的 flex-basis为80px，其他为flex-grow:1时：

<div style="display:flex;border:1px solid #000;">
	<div style="height:100px;background-color:gray;flex-grow:1;">1</div>
	<div style="height:100px;background-color:red;flex-basis: 80px;">2</div>
	<div style="height:100px;background-color:gray;flex-grow:1;">3</div>
</div>