Flex 弹性布局

Flex

Flex，全称Flexible Box，意为“弹性布局”，用来为盒状模型提供最大灵活性。Flex布局需要在一个容器中实现，容器中的元素就是项目。其中，主轴一般默认是x轴，交叉轴一般默认是y轴。
设置“弹性布局”，让所有的子元素在一行显示，给display设置为flex，当前标签就为容器，其中的子元素为项目。

容器的属性

flex-direction 设置主轴方向
取值：
row 项目从左到右依次摆放(默认值)
row-reverse 项目从右到左依次摆放
column 项目从上到下依次摆放
column-reverse 项目从下到上依次摆放

flex-wrap 设置项目是否换行
取值：
nowrap 不换行，即所有项目在一行显示(默认值)
wrap 换行 （注：条件是项目的宽度/高度之和大于容器的宽度/高度）
wrap-reverse 换行，第一行在最下方

flex-flow 设置主轴方向和是否换行
书写格式： flex-flow: 主轴方向 是否换行（取值参照上面）

justify-content 主轴方向上的对齐方式
（此处主轴为默认的x轴）
取值：
flex-start 左对齐(默认值)
flex-end 右对齐
center 居中对齐
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items 交叉轴的对齐方式
（此处交叉轴为默认y轴，且项目不换行）
flex-start 顶部对齐
flex-end 底部对齐
center 居中对齐
baseline 以文本的基线对齐
stretch 如果项目未设置高度或设置为auto，将占据整个容器的高度(默认值)

align-content 定义多根轴线的对齐方式
（此处交叉轴为默认y轴，且项目必须换行，如果项目不换行，该属性不起作用）
flex-start 多行顶部对齐
flex-end 多行底部对齐
center 多行垂直居中
space-between 垂直方向上两端对齐
space-around 垂直方向上分散对齐
space-evenly 垂直方向上平均分配

项目的属性

order 设置项目的排序。数值越小，排列越靠前，默认值为0。

flex-grow 定义项目的放大比例。默认值为0，即如果空间还有剩余，也不放大项目。如果flex-grow的取值不为0，则按照比例分配剩余的空间。

flex-shrink 定义项目的缩小比例。默认值为1，即如果空间不足，该项目将缩小，同样的，项目会以flex-shrink的取值按照比例来缩小每个项目。

flex 同时设置放大比例和缩小比例
书写格式： flex: 放大比例 缩小比例;

align-self 允许单个项目有与其他项目不一样的对齐方式，取值和align-items一样，其取值可以覆盖align-items的取值。