css3 之弹性布局

一, 首先了解下flex的七种属性

　　1,display: flex

1. 　　　设置父元素的flex模式　

　　2,flex-direction: row｜row-reverse｜column｜column-reverse

1. 主轴的方向
2.  row: 垂直方向，至上而下，
3. row-reverse: 垂直方向，至下而上
4. column: 横向，从左向右
5. column-reverse: 横向，从右向左

　　3,flex-wrap

1. 决定子元素在一行排列不下时，是否要换行
2. 默认值是 normal 另外还有两个值，wrap, wrap-reverse.
3. flex-wrap: wrap; //换行
4. flex-wrap: wrap-reverse; //换行，但是第一行在最下面
5. flex-wrap: normal，//不换行

• 4,justify-content

1. 在主轴方向的对齐方式 
2. center: 居中对齐
3. flex-start: 左对齐
4. flex-end: 右对齐
5. space-around: 自动对齐，中间有空格
6. sapce-between: 靠两边对齐，中间有间隙

　　5,align-content

　　在侧轴的对齐方式 

1. align-content定义多行项目的对齐方式。如果只有一行项目，该属性不起作用
2. flex-start这几行顶部对齐
3. flex-end这几行底部对齐
4. center这几行居中对齐
5. stretch这几行进行扩展或者缩放，从而填满容器高
6. space-between这几行中间使用空格进行填充(两端对齐)
7. space-around这几行用空格进行围绕（两边及中间）