【css】-- flex:1的作用

flex:1 实质上是 flex-grow: 1; flex-shrink: 1; flex-basis: 0;

flex默认值为0 1 auto该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

一、flex-grow

flex-grow属性指定了flex容器中剩余空间的多少应该被分配给项目。

flex-grow设置的值为扩张因子，默认为0，剩余空间将会按照这个权重分别分配给子元素项目。

1. 若总体增长因子和大于1

计算方法：增长大小 = 剩余空间 * 增长因子 / 整体增长因子和

例如：容器大小为350px，box1宽度为100px，flex-grow:1；box2宽度为100px，flex-grow:2，则剩余空间为150px。

     则box1增长大小为：150 * 1 / (1 + 2) = 50px；box2增长大小为：150 * 2 / (1 + 2) = 100px

2. 若总体增长因子和小于1，整体增长因子和为1

计算方法：增长大小 = 剩余空间 * 增长因子 / 整体增长因子和（1），简单记就是增长因子大小就是所占的剩余空间比例大小

例如：容器大小为350px，box1宽度为100px，flex-grow:0.1；box2宽度为100px，flex-grow:0.2，则剩余空间为150px。

     则box1增长大小为：150 * 0.1 / 1 = 15px；box2增长大小为：150 * 0.2 / 1 = 30px

二、flex-shirk

  该属性指定了 flex 元素的收缩规则。

  flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

  默认属性值为1，所以在空间不够的时候，子项目将会自动缩小。

  计算方法和flex-shrik一样，使用超出部分 * 所占比例

三、flex-basis

  指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

  如果设置了flex-basis值，那么元素占用的空间为flex-basis值；如果设置为auto，那么元素占据的空间为元素的width/height值。

  若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)