一、基本認識
Flex是Flexible Box的縮寫，“靈活的盒子”，就是彈性布局，用來為盒狀模型提供最大的靈活性。
傳統的布局方式基於盒模型，主要通過display、position、float、padding、margin等屬性進行布局排版，使用起來不是特別方便。
flex布局簡單粗暴且完美地解決了這一問題，且兼容市面上所有現代瀏覽器。
注意：
- Internet Explorer 10： 使用 -ms- 前綴；
- UC瀏覽器： 使用 -webkit- 前綴。
二、基本概念
主軸
主軸由 flex-direction 定義,默認為inline方向。
交叉軸
交叉軸與主軸垂直。
三、屬性
創建flex容器：
display: flex;
display: inline-flex; 針對行內元素
flex-direction: row 主軸按inline方向
row-inverse 主軸按inline方向，起點和終點替換
column 主軸按block方向
column-inverse 主軸按block方向，起點和終點替換
flex-wrap: wrap 容器內項目過多放不下時換行
no-wrap 不換行
flex-flow: flex-direction flex-wrap 的簡寫，例如 flex-flow: row wrap; 表示row 主軸按inline方向，項目過多會換行。
flex-basis: 容器內元素的默認空間大小，默認值為 auto，即為元素本身尺寸大小
flex-shrink: 若為正數，flex 元素會以 flex-basis 為基礎，沿主軸方向收縮尺寸
flex-grow: 若為正數，flex 元素會以 flex-basis 為基礎，沿主軸方向增長尺寸
flex：flex-grow flex-shrink flex-basis 的簡寫。
align-item：交叉軸的對齊方式
stretch 默認值
flex-start flex元素按容器頂部對齊
flex-end flex元素按容器底部對齊
center 居中對齊
justify-content：主軸對齊方式
stretch 默認值
flex-start flex元素按容器頂部對齊
flex-end flex元素按容器底部對齊
center 居中對齊
sapce-between 元素之間的間隙相同 兩邊沒有剩余空間
sapce-round 元素之間的間隙相同 兩邊的剩余空間為元素之間空隙的一半
sapce-evenly 元素之間的間隙相同 兩邊的剩余空間等於元素之間空隙