flex弹性布局

容器属性

1.flex-direction

flex items默认都是沿着main axis（主轴）从main start开始往main end方向排布
flex-direction决定了main axis的方向，有四个取值：row（默认值）、row-reverse、column、column-reverse

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.justify-content

justify-content决定了flex item在main axis上的对齐方式
flex-start(默认值):与main start对齐
flex-end：与main end对齐
center：居中
space-between：flex items 之间的距离相等，与main start、main end两端对齐
space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半

3.align-items

决定flex items在cross axis上的对齐方式
normal：在弹性布局中，效果和stretch一样
stretch：前提是items不设置高度，当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container(或者换句话说：如果项目未设置高度或设为auto，将占满整个容器的高度。)
flex-satrt:与cross start 对齐
flex-end:与cross end 对齐
center:居中对齐
baseline:与基准线对齐

4.flex-wrap

决定了flex container 是单行还是多行
nowrap(默认)：单行
wrap：多行
//这个比较少用
wrap-reverse:多行（对比wrap，cross start 与cross end相反）

5 align-content

决定了多行flex items 在cross axis的对齐方式 用法与justify-content相似 一个是横轴。一个控制竖轴
stretch(默认值)：与align-items的stretch类似，当items有高度的时候，无效果
flex-start:与cross start 对齐
flex-end :与cross end 对齐
center：居中对齐
space-between:flex items 之间的距离相等，与cross start、cross end两端对齐
space-evenly: flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离的一半

6 flex-flow 是flex-direction与flex-wrap的简写

也就是说，当使用这个属性的时候，可以使用上述两个的属性值，例如：flex-flow: row wrap;（水平排列，多行显示）