flex:1

1、flex:1,不是单纯的设置flex这个属性的1 1 0%

这是三个关于项目（设置flex布局的父元素下的子元素）属性的简写，分别是：

属性名	flex-grow	flex-shrink	flex-basis
默认值	0	1 ···负值无效 ···flex环境默认是不换行的，即使父容器宽度不够也不会，除非设置flex-wrap来换行	auto
概念	定义项目的放大比例，默认为0。即如果存在剩余空间，也不放大	定义项目的缩小比例，默认为1。即如果空间不足，该项目将缩小	定义了在分配多余空间之前，项目占据的主轴空间（main size）
取值	考虑情况：当父元素有剩余空间时，子元素如何分配父元素的剩余空间	考虑情况：当子元素超出父元素时，子元素如何缩小自己的宽度	---

2、 展开说说这三个属性

1）flex-grow

举例：父元素width=400px，子元素A的width=100px，子元素B的width=200px。当A、B元素以不同比例索取剩余空间时，A、B元素的width分别是多少？

剩余空间：400-100-200=100px

• A索取剩余空间：设置flex-grow:1，B不索取

A的宽度：100+100=200px

• B索取剩余空间：设置flex-grow:1，A不索取

B的宽度：200+100=300px

• A,B索取剩余空间，怎么来计算彼此能拿到剩余空间的多少呢？

分配到的剩余空间宽度 = 剩余空间宽度*(自身元素的flex-grow值 / 所有元素的flex-grow值的和)

假设A设置flex-grow:1，B设置flex-grow:2

计算结果是：
A分配到的剩余空间宽度 = 100px * (1/(1+2)) = 33.33px
B分配到的剩余空间宽度 = 100px * (2/(1+2)) = 66.67px

2）flex-shrink

举例：父元素width=400px，子元素A的width=200px，子元素B的width=300px。当A、B元素设置不同的flex-shrink时，A、B元素的width分别是多少？

剩余空间：400-200-300=-100px

• A、B都不减小宽度，都设置flex-shrink为0，则有100px超出父元素
• A不减小宽度，flex-shrink为0，B减小，flex-shrink为1

B的宽度：300-100=200px

• A、B都减小宽度，怎么来计算彼此能拿到剩余空间的多少呢？

分配到的减小宽度 = 超出宽度*（自身宽度*（自身元素的flex-shrink值 / 所有子元素的flex-shrink值 * 自身宽度 的和））

假设A设置flex-shrink为3，B设置flex-shrink为2

计算结果：
A减小的宽度 = 100px * （200px * 3/（200 * 3 + 300 * 2））= 50px
B减小的宽度 = 100px * （300px * 2/（200 * 3 + 300 * 2））= 50px

3）flex-basis

flex-basis规定的是子元素的基准值。是否溢出计算与flex-basis属性相关。规定的范围取决于box-sizing。

取值情况：
        auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
        content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
        百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

3、看你学懂了不？

根据这几个方面来计算：

1、主轴上的父容器总尺寸

2、子元素的总基准值

3、伸缩放大系数之和

4、剩余空间

5、剩余空间分配

6、最终各个元素的宽度

---

例1：设置父元素width=600px，三个子元素A、B、C，A的width为140px，flex为2 1 0%，B的width为100px，flex为2 1 auto，C不设width，flex为1 1 200px。求A、B、C三个元素的width是多少？

1、主轴上的父容器总尺寸:600px

2、子元素的总基准值:0+auto+200=0+100+200=300px

3、伸缩放大系数之和:2+2+1=5

4、剩余空间:600-300=300px

5、剩余空间分配:A:300*2/5=120px   B:300*2/5=120px    C:300*1/5=60px

6、最终各个元素的宽度

A:0+120=120px

B:100+120=220px

C:200+60=260px

---

例2：设置父元素width=600px，三个子元素A、B、C，A的width为140px，B的width为100px，C不设width，flex均为auto。求A、B、C三个元素的width是多少？

1、主轴上的父容器总尺寸:600px

2、子元素的总基准值:auto+auto+auto=140+100+0=240px

3、伸缩放大系数之和:1+1+1=3

4、剩余空间:600-240=360px

5、剩余空间分配:A:360*1/3=120px   B:360*1/3=120px    C:360*1/3=120px

6、最终各个元素的宽度

A:140+120=260px

B:100+120=220px

C:0+120=120px

---

例3：设置父元素width=600px，三个子元素A、B、C，A的width为140px，B的width为100px，C不设width，flex均为1。求A、B、C三个元素的width是多少？

flex:1 指的是flex:1 1 0%

1、主轴上的父容器总尺寸:600px

2、子元素的总基准值:0+0+0=0

3、伸缩放大系数之和:1+1+1=3

4、剩余空间:600-0=600px

5、剩余空间分配:A:600*1/3=200px   B:600*1/3=200px    C:600*1/3=200px

6、最终各个元素的宽度

A:0+200=200px

B:0+200=200px

C:0+200=200px