1.基本概念：
采用flex布局的元素称为flex容器。
容器默认存在两根轴：水平的主轴：main axis 主轴的开始位置，与边框的交叉点：main start 结束位置：main end
垂直的交叉轴：cross axis 交叉轴开始的位置：cross start 结束位置：cross end
2.容器的属性
flex-direction 主轴的方向
flex-direction：row（水平方向，起点为左端）|row-reverse（水平方向，起点为右端）|column（垂直方向，起点在上）|column-reverse（垂直方向，起点在下）
flex-wrap 如果项目一条轴线排不下
flex-wrap：nowrap（不换行 默认）|wrap（换行，在原行下方）|wrap-reverse（换行，在原行上方）
flex-flow
flex-flow：<flex-direction>||<flex-wrap>
justify-content 项目在主轴上的对齐方式
justify-content：flex-start（左对齐）|flex-end（右对齐）|center（居中）|space-between（两端对齐）|space-around：每个项目间隔相等
align-items 在交叉轴上如何对齐
align-items：flex-satr|flex-end|center|baseline（项目第一行文字的基线对齐）|srtetch（项目设置高度或为auto，则占满整个容器高度）
3.项目属性
order 定义项目的排列顺序
order：0； （默认为0）
flex-grow 定义项目放大比例
flex-grow：0；（默认为0）如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，
则前者占据的剩余空间将比其他项多一倍。
flex-shrink 定义项目缩小比例
flex-shrink：0； 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值无效。
flex-basis 分配多余空间，项目占据主轴的空间
flex-basis：<length>|auto 如果设置为值，则占据固定空间
flex ：<flex-grow>|<flex-shrink>|<flex-basis>
align-self：可以使单个项目与其他项目对齐方式不一致，可覆盖align-items。 属性值与align-items一致。