flex布局
块级元素：
.box{
display: flex;
display: -webkit-flex; / Safari /
}
内联元素：
.box{
display: inline-flex;
}
容器（flex container）的属性：
• flex-direction：
主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap：
一条轴线排不下，如何换行
flex-wrap: nowrap | wrap | wrap-reverse;
不换行 | 换行 | 倒序换行；
• flex-flow：
flex-direction属性和flex-wrap属性的简写形式
flex-flow: <flex-direction> || <flex-wrap>;
• justify-content：
项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
□
• align-items：
项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
□
• align-content：
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
项目（flex item）的属性：
• order：
项目的排列顺序。数值越小，排列越靠前，默认为0。
order:
• flex-grow：
项目的放大比例，默认为0
flex-grow: <number>; /* default 0 */
• flex-shrink：
项目的缩小比例，默认为1
flex-shrink: <number>; /* default 1 */
○
• flex-basis：
项目占据的主轴空间
flex-basis: <length> | auto; /* default auto */
• flex：
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
• align-self： 单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
align-self: auto | flex-start | flex-end | center | baseline | stretch;