FlexBox弹性盒子计算规则

和FlexBox弹性盒子计算规则相关的属性有：

1. margin

2. flex-basis

3. flex-grow

4. flex-shrink

margin

Flex容器每一行的宽度 = 每个子容器的宽度 + 子容器margin-left和margin-right的值

    
    html:
    
    

        

        

        

    
    
    css:
    
    .container {
            display: flex;
            width: 400px;
        }
        .item {
            height: 40px;
        }
        .first {
            flex: 1 0 0;
            background-color: red;
        }
        .second {
            flex: 2 0 0;
            background-color: blue;
            margin: 0 50px;
        }
        .third {
            flex: 3 0 0;
            background-color: yellow;
        }

总width(400px) = 总margin(100px) + 每个item的宽度;

由于flex-basis属性值为0，剩余空间为400px，则各个子盒子会根据自身的flex-grow属性值及所占总比重来分配剩余空间
.first宽度: 400*(1/(1+2+3))
.second宽度: 400*(2/(1+2+3))
.third宽度: 400*(3/(1+2+3))

flex-basis

子盒子的基准值

• 可以代替申明width属性

• 同时声明width属性和flex-basis属性时，会以flex-basis的值来计算

• 当flex-basis属性值为0，在width有申明的情况下以width来计，width没有的申明的话，则按其内容来计。

flex-grow

• flex-grow申明的值为0，不出现伸展的情况

• flex-grow申明的值不为0，且子盒子的flex-basis(或width)值之和 < 容器的padding的左边界到右边界的值。那么子盒子会根据申明的flex-grow值去分配剩余的空间。

分配规则是按子盒子flex-grow属性值所占百分比来分配: demo见上

flex-shrink

    

    

    



.container {
    display: flex;
    width: 200px;
    height: 400px;
    border: 1px solid #c3c3c3;
}
.first {
    flex-basis: 40px;
    flex-shrink: 1;
}        
.third {
    flex-basis: 40px;
    flex-shrink: 2;
}
.second {
    flex-shrink: 3;
    width: 200px;
}

首先依据flex-basis属性计算各个弹性盒子的宽度值，(200+40+40)px，一共溢出了80px。
然后依据各个弹性盒子的flex-shrink属性值，算出其加权后的综合值：
1*40 + 2*40 + 3*200 = 720(px);
.first需要缩小的值：(40\*1/720)*80 约等于4px
.second需要缩小的值：(40\*2/720)*80 约等于9px
.third需要缩小的值：(200\*3/720)*80 约等于67px
第一个盒子的宽度40-4 = 36px
第二个盒子的宽度40-9 = 31px
第三个盒子的宽度200-67 = 133px

• 如果flex-basis的属性未设置，即flex-basis: 0,那么弹性盒子计算多余空间或者溢出空间的宽度是依据其width的值，如果width未设置，那么是其内容的宽度

• 如果同时设置了flex-basis的属性值和width的值，那么将会忽略width的值

• flex-basis可设为百分比，是相对于祖先申明为display:flex的元素而言

几个常见的flex取值：

• flex: 1; -->> flex: 1 1 0%;

• flex: none; -->> flex: 0 0 auto;

• flex: auto; -->> flex: 1 1 auto;

• flex: 0 auto;或者 flex: initial -->> flex: 0 1 auto; 即为flex的初始值