flex布局

flex，意为 " 弹性布局 "，任何一个 容器/行内元素 都可以指定为flex布局。

.box {
	display:flex;
}

flex布局的盒子有6个属性

1、justify-content属性（定义项目在主轴上的对齐方式）

.box {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start：左对齐（默认值）
flex-end：右对齐
center：居中
space-between：两端对齐，子盒子之间的间隔都相等
space-around：每个子盒子的间隔相等

2、flex-wrap属性（定义如果子盒子在一行排不下了，如何换行）

.box {
	flex-wrap: nowrap | wrap | wrap-reverse
}

nowrap：不换行（默认值）
wrap：换行
wrap-reverse：换行（第一行放不下了，在这一行的上面增加）

3、flex-direction属性（决定子盒子的排列方向）

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

row：水平方向排列，起点在左端（默认值）
row-reverse：水平方向排列，起点在右端
column：垂直方向排列，起点在上方
column-reverse：垂直方向排列，起点在下方

4、align-items属性（定义子盒子在交叉轴上如何对齐

.box {
	align-items: flex-start | flex-end | center | baseline | stretch
}

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）。

5、align-content属性（定义多根轴线的对齐方式。即子盒子排列了几行）

.box {
	align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch：轴线占满整个交叉轴（默认值）。

6、flex-flow属性（是flex-direction属性和flex-wrap属性的简写，默认值为 row nowrap.