flex:1

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

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： flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

• 默认值为auto，即 项目原本大小；

• 设置后项目将占据固定空间。

所以:

• flex属性的默认值为：0 1 auto （不放大会缩小）

• flex:none 等价于 flex：0 0 auto （不放大也不缩小）

• flex:auto 等价于 flex：1 1 auto （ 放大且缩小）

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

flex：n；等价于

	// 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：26px； 等价于

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属性中不规定值则为0 1，flex-basis为auto。

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

<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 不会纳入剩余空间

例二：

<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 20%;
        background: pink;
    }
    .item-3 {
        flex: 2 1 80%;
        background: red;
    }
</style>

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

item-1：item-2：item-3=0：2：8
所以
item-1 0px
item-2 120px
item-3 480px