基本概念
采用flex布局的元素称为flex container，它的所有子元素自动称为容器成员，称为flex item，任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局
容器属性
flex-direction
决定主轴的方向
- row：主轴从左往右
- row-reverse：主轴从右往左
- column：主轴从上往下
- column-reverse：主轴从下往上
flex-wrap
决定换行的行为
- nowrap：不换行，当items总宽度超过了container，item将被挤压
- wrap：换行，前一行在上方
- wrap-reverse：换行，前一行在下方
justify-content
设置成员在主轴上的对齐方式
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，成员之间的间隔全部相等
- space-around：每个成员两侧的间隔相等
align-items
定义成员在交叉轴上的对齐方式
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：成员的第一行文字的基线对齐
- stretch：如果成员未设置高度，或者高度为auto，那么成员将占满交叉轴方向
align-content
定义了多根轴线（主轴）的对齐方式，如果container里面只有一根主轴，那么该属性不起作用
轴线数主要由flex-wrap属性来决定，当flex-wrap设置为nowrap的时候，容器仅存在一根轴线，因为item不会换行；当flex-wrap设置为wrap，容器可能会出现多条轴线，此时需要用align-content来设置多条轴线的对齐方式
- flex-start：从交叉轴开始位置填充
- flex-end：从交叉轴结尾位置填充
- center：与交叉轴中点对齐
- space-between
- space-around
项目属性
order
定义项目的排序顺序，数值越小，排名越靠前
flex-grow
定义成员的放大比例，默认是0，即如果存在剩余空间，也不放大
如果所有成员的flex-grow都是1，那么它们将等分剩余空间
如果有一个成员的flex-grow为2，其他项目都是1，则前者占据的剩余空间将比其他项目多一些
flex-shrink
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
- 此属性设置负值无效
flex-basis
定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间