Flex是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
.box{display:flex;}
行内元素也可以使用Flex布局.box{display:inline-flex;}
justify-content:水平对齐元素
flex-start:元素和容器左端对齐flex-end:元素和容器右端对齐center：元素在容器中居中space-between:元素之间保持相等距离space-around:元素周围保持相等的距离
align-items:纵向对齐元素
flex-start: 元素与容器的顶部对齐。flex-end: 元素与容器的底部对齐。center: 元素纵向居中。baseline: 元素在容器的基线位置显示。stretch: 元素被拉伸以填满整个容器。
flex-direction:定义元素在容器中的摆放方向
row:元素摆放方向和文字方向一致row-reverse:相反colum:元素摆放从上到下colum-reverse:从下到上
flex-wrap:元素换行
nowrap:所有元素都在一行wrap:元素自动换行wrap-reverse:元素自动换成逆序多行
flex-direction 和flex-wrap 经常一起使用，可以缩写为 flex-flow
例如flex-flow:column wrap;
可以用flex-flow:row wrap来设置自动换行
align-content:决定行与行之间隔多远
flex-start: 多行都集中在顶部。flex-end: 多行都集中在底部。center: 多行居中。space-between: 行与行之间保持相等距离。space-around: 每行的周围保持相等距离。stretch: 每一行都被拉伸以填满容器。
