在了解 flex：1 之前我们先了解一下flex的属性值有哪些，就如同background一样，有着backgournd-images、background-color、background-position等属性名一样， flex也有着3个类似的属性，（属性都是给子级添加的，父级必须设置display：flex)。

当子级元素总宽度占不满父级盒子时对多余空间的处理

如： 只给文本2设置flex-grow：1； 可以看出，文本2将该行多余的空间占满了，此时子级元素的总宽度和父级相等

如： 给文本2设置了flex-grow：1； 又给文本3设置了flex-grow：2 则计算方法为： 多出来的空间 / （1+2），文本2占1份。文本3占2份

当子级元素设置的总宽度超过了父级的宽度，对超出的宽度的处理

如： 超出部分被平均分配给了四个盒子，盒子进行了挤压

如： 给文本2设置flex-shrink：0；

先将父级盒子的总宽度平均分给每个子级元素，得到一个初始宽度 再将超出的空间除以设置的flex-shrink的总值，再按份数给盒子减去改值 如： 给文本1设置flex-shrink：1 给文本2设置flex-shrink：3 给文本3设置flex-shrink：2 给文本4设置flex-shrink：0 那么，

css样式中给盒子设置的宽度

父级宽度 ÷ 4 = 每个盒子的初始宽度

盒子设置的总宽度 — 父级盒子的宽度 = 超出部分的宽度

超出部分的宽度 / （1+3+2） = 每个盒子应挤压的空间

文本1： 盒子设置的宽度 减去 一份应挤压的空间 文本2： 盒子设置的宽度 减去 三份应挤压的空间 文本3： 盒子设置的宽度 减去 二份应挤压的空间 文本4 = 盒子设置的宽度（而不是初始宽度）

（本人还没有找到具体的作用，个人感觉就是给盒子加宽度的…）

好了，对flex的三个属性值有了初步的了解之后，我们可以回到最开始的那个问题了 就是flex：1 的问题。

通过前面的描述，我们应该可以明白了flex的默认值： 即： flex-grow：0； flex-shrink：1； flex-basis：auto 也可以合成一个： flex： 0 1 auto； 然而，这并不是flex：1的完整写法，上面这个只是flex的默认值，表示子级总宽度小于父级盒子宽度时，对多余空间不处理，子级总宽度大于父级盒子宽度时，对子级进行挤压

flex：1的完整写法应该为： flex： 1 1 0%

flex：1 应该是子级元素占满整个多余部分而不进行挤压，当然，一般弹性盒中只能设置一个子级元素 flex：1；