flex：1， flex：0 ，flex：n

1.flex: 1; === flex: 1 1 0;

2.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

         1)flex-grow：定义项目的的放大比例

                1.值默认为0，即使存在剩余空间，也不会放大

                2.值为 1  ，    等分剩余空间（自动放大占位）

                3.值为 n  ，    占据的空间（放大的比例）是 flex-grow 为 1 的 n 倍

        2）flex-shrink：定义项目的缩小比例

                1.值默认为1，如果空间不足，该项目将缩小

                2.值为  0  ，   空间不足时，该项目不会缩小

                3.值为  n  ，   空间不足时缩小的比例是 flex-shrink 为 1 的 n 倍 

        3）flex-basis:   定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间

                1.值默认为auto

                2.值可以设置不同单位大小

3.扩展

         1）flex 为一个非负数字 n：     该数字为 flex-grow 的值

flex ：n；
/* 等同于: */
flex-grow ：n；
flex-shrink ：1；
flex-basis ：0%；

         2）flex 为两个非负数字 n1，n2:       分别为 flex-grow 和 flex-shrink 的值

 

flex ：n1 n2;
/* 等同于: */
flex-grow ：n1；
flex-shrink ：n2；
flex-basis ：0%；

        3)flex 为一个长度或百分比 L：        视为 flex-basis 的值

flex : L;
/* 等同于: */
flex-grow ：1；
flex-shrink ：1；
flex-basis ：L；

        4)flex 为一个非负数字 n 和一个长度或百分比 L：   分别为 flex-grow 和 flex-basis 的值

flex ：n L；
/* 等同于: */
flex-grow：n；
flex-shrink：1；
flex-basis：L;