css布局之弹性布局

Flex(弹性布局)。是一种响应式布局，能自动伸缩盒模型达到自适应的效果。
弹性布局由弹性容器(flex container)和弹性项目(flex item;组成。
在弹性容然中，水平方向称为主轴(main axis)(起点main start,终点main end);垂直方向称为纵铂(ross axis(起点cross stat.终点cross end)。在弹性项目中，元素的宽度称为main size，高度称为cross size。
弹性容器
通过display: flex属性，可将元素声明块级弹性容器;通过dsplay: inline-fex，可将元素声明为行内弹性容器。

1. flex-direction属性
flex-direction指定主轴(main cross)的方向,即元素排列的方向。
//需先声明为flex布局
flex-direction: row | row-reverse | column | column-reverse
//属性解释;
row:水平方向。从左往右
row-reverse:水平方向,从右往左column:垂直方向，从上往下
column-reverse:垂直方向,从下往上

2. flex-wrap属性
flex-wrap属性，指定弹性项目的换行方式，即弹性项目超过一行时如何换行。flex-wrap: no-wrap | wrap | wrap-reverse
//属性解释:
no-wrap:不换行(默认)wrap:正常换行
wrap-reverse:换行．第一行在下方，从下往上换行

3. flex-flow属性
flex-low属性，为fiex-direction和flex-wrap的合并属性。第一个为flex-direction,第二个为flex-wrap
flex-fow: <flex-direction> <flex-wrap>

4. justify-content属性
justify-content属性，指定弹性内容在主轴上的排列方式。
justify-content: flex-start | flex-center / flex-end | space-between | space-around

//属性解释:
flex-start:从主轴起点(main start)到主轴终点(main end)center:居中
flex-end:从主轴终点(main end)到主轴起点(main start)space-between:项目周围的空间相等．但空隙会折叠 space-between:项目周围的空间相等．但空隙不折叠

5. align-items属性
align-items属性，指定弹性项目在纵轴上的对齐方向。align-items: flex-start | center | flex-end | base-line | stretch
//属性解释:
flex-start:项目对齐纵轴的起点(cross start)center:居中
flex-end:项目对齐纵轴的终点(cross end)baseline:基于基线对齐
stretch:拉伸(默认,．从起点(cross start}到终点(croos end)