flex布局，flex:1的计算

一、flex的属性梳理

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

（1）flex1的计算规则

第一步：先明确：flex 是 flex-grow | flex-shrink | flex-basis 的缩写。

1、默认情况：flex：0 1 auto;

2、flex取值为none 0 0 auto;

3、flex取值auto: 1 1 auto

4、flex取值为一个非负的值时：则该数值是flex-grow的值。flex-shrink: 1， flex-basis: 0；即为： num 1 0%;

5、flex取值是一个长度或百分比 60%，200px：则该数值是flex-basis的值。取值（ 1 1 60%）（ 1 1 200px）；

6、flex取值是2个非负数字（2，3），则分别视为flex-grow和flex-shrink的值。flex-basis取值0%。（2 3 0%）；

7、flex 取值是1个非负数字一个百分比(长度)(2 200px)，则flex-grow 和 flex-shrink的值是非负数字的值。(2 2 200px)

第二步：剩余空间的计算和占比的分配

flex-basis: 规定的是子元素的基准值；

auto: 检索该子元素的主尺寸。如果主尺寸是auto,则采用主尺寸的值。如果也是auto就是去content的值。

百分比：根据其包含块的主尺寸计算。如果包含块的主尺寸未定义，则计算结果和设为auto一样。

  
  
  
  


  

    
第一个li
    
我是第二个li
    
的第三个li
    
布局中的第四个li
  

计算步骤：

1、主轴的父容器的尺寸：750px;

子元素的总基准：0% + auto + 0% + 200px = 0 + 80 + 0 + 200 = 280px;

0% 即宽度是0；auto 对应主尺寸。

剩余的空间：750 - 280 = 470；

2、伸缩放大系数和：

1+2+1+2 = 6；

剩余空间的分配：470*（1/6）= 78.3

470*(2/6)=156.6

3、各项目的最终宽度：

0+78.3 = 78.3

80+156.6 = 236.6

0+78.3 = 78.3

200+156.6=356.6

参考链接：

[align-items 和 align-content 的区别](https://www.cnblogs.com/zmc-change/p/6178757.html)

[vertical-align](https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral)

[flex1 详解](https://blog.csdn.net/fengyjch/article/details/79047908)