原理：
flex是彈性盒子模型。元素被設置display：flex，就變成彈性容器。
flex布局是一維布局模型。大多屬性都是作用於主軸，交叉軸被動變化。
- 每個彈性容器都有兩根軸：主軸和交叉軸，兩軸之間成90度關系。注意：水平的不一定就是主軸。
- 每根軸都有起點和終點，這對於元素的對齊非常重要。
- 彈性容器中的所有子元素稱為<彈性元素>，彈性元素永遠沿主軸排列。
- 彈性元素也可以通過
display:flex設置為另一個彈性容器，形成嵌套關系。因此一個元素既可以是彈性容器也可以是彈性元素。
彈性容器屬性：
flex-direction主軸方向：row（主軸為行，起點在右），column（主軸為列，起點在上），row-reverse（主軸為行，起點在右），column-reverse（主軸為列，起點在下）
flex-wrap當容器太小，沿主軸的處理方式：nowrap（不折行），wrap（折行），wrap-reverse（反向折行）
flex-flow復合屬性，flex的工作流。
flex-flow: row nowrap;
jutisfy-content主軸上的對齊方式
align-items交叉軸上的對齊方式
彈性元素屬性：
flex-shrink容器太小，元素收縮：1（默認，所有元素都按規則縮小）
flex-grow容器太大，元素擴展：0（默認，所有元素保持各自大小）、大於0的值（分配容器剩余寬度）
flex-basis主軸上的初始尺寸（flex-shrink、flex-grow生效前），主軸為行時對應width，主軸為列時對應height。
flex-basis：0； // 實際寬度：內容撐開的寬度
flex-basis：20px；width：10px； // 實際寬度：20px。flex-basis優先級更高
flex-basis：auto；width：10px； //實際寬度為10px