弹性布局总结

一：外层盒子属性

1.flex-direction  //容器内元素排列方向 

row 水平从左至右  //挤挤不换行

column 垂直从上往下  //超出区域

row-reverse 水平从右往左   //同样会超出   

column-reverse 垂直从下往上 //同样会超出

2.flex-wrap //元素 队列 属性 

nowarp : 自动缩小属性 且不换行

warp：换行 且第一行在左上方

warp-reverse：换行且第一行在下面

3.flex-flow //flex-direction和flex-wrap的简写形式

默认值为row nowrap，即横向排列 不换行。

4.justify-content //决定元素在主轴上的对齐方式

　flex-start：左对齐

　flex-end：右对齐

    center：居中对齐

　 space- between：两端对齐

　 space-around：沿轴线均匀分布

5.align-items //决定元素在垂直轴上的对齐方式 

　     flex-start：顶端对齐

　     flex-end：底部对齐

　　  center：竖直方向上居中对齐

　　   baseline：元素第一行文字的底部对齐

　　　stretch：当元素未设置高度时，元素将和容器等高对齐

6.align-content  //多行元素在交叉轴的对齐方式，当有多行时，定义了align-content后，align-items属性将失效

             flex-start：左对齐

　　　   flex-end：右对齐

　　　　center：居中对齐

　　　　space- between：两端对齐

　　　　space-around：沿轴线均匀分布

　　　　stretch：各行将根据其flex-grow值伸展以充分占据剩余空间

二：内层元素属性

1.order //默认值为 0 当 order 越小 排列越靠前

2.flex-grow //默认为0 ，当元素在容器有多余空间的时候，元素的水平方向放大 

3.flex-shrink //当容器空间不足时候，元素是否缩小

4.flex-basis //表示元素在主轴占据的空间 默认auto

5.flex //flex-grow、flex-shrink和flex-basis三属性的简写总和

6.alin-self //元素在自己轴上的对齐方式

　    auto：和父元素align-self的值一致

　　 flex-start：顶端对齐

　　 flex-end：底部对齐

　 　center：竖直方向上居中对齐

　 　baseline：item第一行文字的底部对齐

　 　stretch：当item未设置高度时，item将和容器等高对齐