flex属性简写详解

flex 简写详解

1.      flex: flex-grow、flex-shrink 、flex-basis缩写

2.      默认值: 

flex: 0 1 auto;

3.      flex:none;

flex:0 0 auto;

4.      flex:auto; 

 flex: 1 1 auto;

5.     单一非负数字：该值为flex-grow值，flex-shrink为1，flex-basis为0%

如    flex : 1;

相当于 : 

flex-grow: 1;
flex-shrink:1;
flex-basis: 1;

6.      flex取长度或百分比：该值为flex-basis的值，flex-grow为1，flex-basis为1。

如    flex: 0% ;

相当于:  

flex-grow: 1;
flex-shrink: 1;		
flex-basis: 0%;

如    flex: 24px;

相当于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;

7.      flex取两非负数字:分别为flex-grow和flex-shrink的值，flex-basis为0%;

如   flex: 2 3;

相当于：

flex-grow:2;
flex-shrink:3;
flex-basis:0%

8.      flex取一非负数字和一个长度或百分比：分别为flex-grow和flex-basis的值，flex-shrink为1

如    flex: 1 0%;

相当于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex-basis取值情况

1.      flex-basis规定元素的基准值

2.      auto: 首先检索元素主尺寸，若不为auto，则取主尺寸值。若为auto，则取值为content

3.      content: 根据元素自动布局

4.      百分比：根据父容器计算，如果父容器未定义尺寸，则计算结果等同故意auto

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width: 140px;
        flex: 2 1 0%;
    }
    .item-2 {
        width: 100px;
        flex: 2 1 auto;
    }
    .item-3 {
        flex: 1 1 200px;
    }
</style>

1.      主轴父容器尺寸：600px

2.      子元素总基准值：0% + auto + 200px =300px;

        0%          即0宽度

        auto        à对应item-2的尺寸，100px

3.      剩余空间：600px-300px = 300px;

4.      放大比例2 + 2 + 1 = 5px;

5.      剩余空间分配,item-1和item-2占2/5，即120px,item-3占1/5,60px

6.      所以

        tem-1: 0% + 120px = 120px

        item-2: auto + 120px = 220px

        item-3: 200px + 60px = 260px;

参考链接1：https://segmentfault.com/a/1190000008942008

参考链接2：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html