flex布局
display: flex; 容器
display: inline-flex; 行内元素
子元素的float、clear、vertical-align 失效
设在容器上的属性
1. flex-diraction 决定主轴的方向（项目的排列方式）
- flex-diraction: row; （元素左起往右排）
- flex-diraction：row-reverse; （元素右起往左排）
- flex-diraction：column； （元素上起往下排）
- flex-diraction：column-reverse； （元素下起往上排）
2. flex-wrap 换行（一行放不下时，如何换行）
- flex-wrap：nowrap; (默认)不换行
- flex-wrap：wrap; 换行（第一行在上方，上往下排）
- flex-wrap：wrap-reverse; 换行 （第一行在下方，下往上）
3. flex-flow
- flex-direction和flex-wrap的简单形式，默认值为：row nowrap (左起不换行样式)
4. justify-content 在主轴上的对齐方式
- justify-content： flex-start; 左对齐
- justify-content： flex-end; 右对齐
- justify-content： center; 居中对齐
- justify-content： space-between; 两端对齐，项目之间间隔相等（两端无间隙）
- justify-content：space-around; 每个项目两端有间隙并且相等，项目之间的间隙是项目与边框间隔的两倍
5. align-items 项目在交叉轴上的对其方式（垂直）
- align-items: flex-start; 上对齐
- align-items: flex-end; 下对齐
- align-items: center； 居中对齐
- align-items: stretch; (默认) 项目未设高时，设有auto，将占满整个容器的高度
- align-items： leaseline 项目的第一行文字的基线对齐
6. align-content 多根轴线的对其方式
- align-content: flex-start；上对齐
- align-content: flex-end；下对齐
- align-content: center； 垂直居中
- align-content: space-between; 垂直两端对齐（上下端午空隙）
- align-content: space-around; 轴线之间是轴线与两端间隔的两倍（上下端有空隙）
- align-content: stretch; (默认) 轴线占满垂直方向
设在项目上的属性
1. order
定义项目排列顺序，数值越小越靠前默认为0
order：<integer>2. flex-grow 定义放大比例 默认为0（所占空间比例）
如果项目的flex-flow都是1，则他们将等分剩余空间（有剩余空间时）
flex-frow: <number>3. flex-shrink 缩小的比例，即空间不足时，该项目将缩小
若项目的flex-shrink都为1，空间不足时，会等比例缩小。当有为0，其余都是1时，则0的部分不缩小，为1的都缩小。
flex-shrink：<number>4. flex-basis 每个项目占据的主轴空间（水平）
flex-basis: <length> / auto （默认 ） 项目的本来大小
5.flex
flex-flow、flex-shrink、flex-basis、的简写，默认为0 | auto
flex: none | [<flex-grow><flex-shrink>? || <flex-basis>]有2个快捷值：auto（1 | auto）、none（0 0 auto）
6.align-self
单个项目可与其他项目不同的对齐方式，可覆盖align-items，默认为auto。
继承父元素align-items，若无父元素，等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch除了auto，其他都与align-items完全一致
