flex布局

主轴和交叉轴

当水平排列时，主轴为横向，交叉轴为纵向

当垂直排列时，主轴为纵向，交叉轴为横向

以子元素的排列方向分主轴和交叉轴

flex-direction

row:水平排列

column：垂直排列

row-reverse：水平反向排列

column-reverse：垂直反向排列

flex-wrap

nowrap：默认不换行，当父元素装不下子元素时会自动压缩子元素

wrap：换行

wrap-reserve：换行但以相反的顺序

flex-flow:  [flex-direction]  [flex-wrap]

justify-content   元素在主轴上的分布方式

            justify-content: start;  //紧挨着靠这开始的位置

            justify-content: end;   //紧挨着靠着结束的位置

            justify-content: space-around;   //分散，两侧有空白

            justify-content: space-between;   //分散，两侧没有空白

            justify-content: center;   //居中

align-items   在交叉轴上的对齐方式   处理单行

            align-items: flex-start;

            align-items: flex-end;

            align-items: center;

align-content   在交叉轴上的对齐方式   处理多行

把多行当作一个整体进行处理

flex-basic:50px   设定元素的基准值，设定以后width将失效

 

flex-grow：1  子元素按照比例均分多余的空间

 

flex-shrink：1  子元素按照比例均分多余的空间

flex-shrink：0 表示不允许缩小

 

flex: flex-grow flex-shrink flex-basic

 

flex:auto    ===flex: 1 1 auto    auto表示width的值

flex:none   ===flex:0 0 auto

flex:100px ===flex:0 0 100px;

以下两个，因为都会默认设置flex-basic所以width不会生效，又自动扩大自动缩小，所以0%是无所谓的

flex:1  ===flex:1 1 0%

flex:0%  ===flex:1 1 0%