解析flex布局

优点：传统的布局基于盒子模型，依赖display、position、float属性；flex可以简便、完整、响应式实现布局，兼容各大浏览器（ie10+）

display:flex      行内元素： inline-flex

---

一、排列方向 flex-direction

• row  水平方向，从左向右
• row-reverse  水平方向，从左向右
• column  垂直方向，从上向下
• column-reverse  垂直方向，从下向上

二、是否换行 flex-wrap

• nowrap  不换行（默认）
• wrap  换行
• wrap-reverse  换行，第一行在下方

三、flex-direction属性和flex-wrap属性的简写形式 flex-flow：row nowrap

四、左右对齐方式 justify-content

• flex-start（默认值）：左对齐   
• flex-end：右对齐  
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

五、垂直对齐方式 align-items

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

六、多根轴线的对齐方式 align-content

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

七、项目属性

• order：排列顺序，数值越小，排列越靠前，默认值为 0
• flex-basis：分配多余空间，默认值：auto；设置width属性，但宽度依旧以flex-basis属性为准。
• flex-grow：默认值为 0，即如果存在剩余空间，也不放大
• flex-shrink：项目的缩小比例，默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。
• flex（0 1 auto）：flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度；flex:auto 等分放大缩小(1 1 auto)，flex:none 不放大不缩小(0 0 auto)
• align-self：允许单个项目有与其他项目不一样的对齐方式，auto(默认)