弹性盒中 flex详解及flex：1的用法解析

弹性盒中 flex详解及flex：1的用法解析

一、flex

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

默认值表示元素不设置该属性时，浏览器默认它存在的样式。

1. flex-grow ： 0（默认值） / 1 / 2 / …

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

flex-grow：0；

表示子级元素正常显示宽度，对多出来的空间不进行处理  

flex-grow: 1 / 2 / …

①、只给一个子级元素添加flex-grow属性时

将该行多余的空间全部分给该元素

如：
只给文本2设置flex-grow：1；

可以看出，文本2将该行多余的空间占满了，此时子级元素的总宽度和父级相等

②、同时给多个元素设置了flex-grow属性时

将该行多出来的空间除以设置的flex-grow的总值，再按份数分给盒子

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

2、flex-shrink： 0 / 1（默认值） / 2 / …

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

只给一个子级元素添加flex-shrink属性时

① flex-shrink: 1;

表示浏览器对子级元素超出部分自动处理

**在弹性盒中，子级元素不会自动换行，当子级元素总宽度超出盒子时，
会自动进行挤压**

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

② flex-shrink：0；

浏览器对该子级元素不进行挤压，该元素正常显示大小，
将超出空间分配给其他盒子挤压

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

给多个子级元素添加flex-shrink属性时

先将父级盒子的总宽度平均分给每个子级元素，得到一个初始宽度
再将超出的空间除以设置的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 = 盒子设置的宽度（而不是初始宽度）

3、flex-basis: auto(默认值) / 0%~100% / 数值

上面两个属性分配多余空间之前，计算是否有多余空间

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

flex-basis: auto

自动显示

flex-basis：0%

设置子级元素的宽度为父级宽度的百分比值

盒子没设置width时表示盒子的宽度由内容撑开

flex-basis： 120px

表示设置该子级元素的宽度为120px

好了，对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；