flex
一、概述
要点：
flex布局通过将一个元素设置display:flex，使它成为一个flex容器（BFC），它的所有子元素都会成为它的项目。
一个容器有两条轴：水平的主轴+垂直主轴的交叉轴。
flex-direction用来指定主轴的方向。justify-content用来指定项目在主轴上的排列方式；align-items用来指定项目在交叉轴上的排列方式。flex-wrap用来规定一行排列不下时的换行方式。对于容器中的项目：
order属性用来指定项目的排列顺序，flex-grow用来指定当排列空间有剩余的时候，项目的放大比例flex-shrink用来指定当排列空间不足时，项目的缩小比例
二、容器的属性
1.flex-direction
主轴方向，即项目排列方向
row（默认）：水平，从左到右
row-reverse：水平，从右到左
column：垂直，从上到下
column-reverse：垂直，从下到上
2.flex-wrap
轴线如果排列不下，如何换行
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
3.flex-flow：
flex-direction和flex-wrap的简写
flex-flow: <flex-direction> || <flex-wrap>
4.justify-content
项目在主轴上的对齐方式
flex-start（默认）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目间间隔相等
space-around：项目两侧间隔相等
项目在交叉轴上的对齐方式
flex-start：顶部对齐
flex-end：底部对齐
center：居中对齐
baseline：第一行文字的基线对齐
stretch（默认）：如果项目没有设置定高，或者设置为auto，将占满整个容器高度
多根轴线的对齐方式。如果项目只有一根轴线，此属性不起作用。
flex-start：自上而下
flex-end：自下而上
center：垂直居中
space-between：自上而下平均排列
space-around：自上而下间隔相等排列
strecth（默认值）：占满交叉轴排列
三、项目的属性
1.order
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2.flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3.flex-shrink
定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4.align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。
参见：
Last updated
