採用flex佈局的元素，成爲flex容器（flex container）。在flex容器內部的子元素稱爲項目（flex item）。
flex佈局最基本的支撐是：水平主軸（main axis），豎直交叉軸（cross axis）。
flex佈局需要注意的一個地方：flex item的float，clear，vertical-align屬性失效。
flex container的主要屬性
1. flex-direction: 取值範圍有row | row-reverse | column | column-reverse。決定主軸方向，水平還是豎直爲主軸。
2. flex-wrap: 取值範圍有nowrap | wrap | wrap-reverse。定義了flex item軸線上排不下時，如何換行。
3. flex-flow: 前兩者的綜合。
4. justify-content: 取值範圍有flex-start | flex-end | center | space-between | space-around。定義了flex item主軸上的對齊方式。
5. align-items: 取值範圍有flex-start | flex-end | center | baseline | stretch。定義flex item在交叉軸如何對齊。
6. align-content: 取值範圍有flex-start | flex-end | center | space-between | space-around | stretch。這個省略，暫時沒摸過。
flex item的主要屬性
1. order 取值範圍有 一切integer，豎直越小排列靠前。默認爲0。定義flex item排列順序。
2. flex-grow 取值範圍有 一切integer，越大佔有剩餘空間越大。默認爲0。定義flex item放大比列，放大規則是等分剩餘空間。
3. flex-shrink 取值範圍有 一切integer，越大縮小的越多。默認爲1，0時不縮小。
4. flex-basis 佔據固定空間
5. flex flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6. align-self 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。可以靈活的控制單個flex item，個人認爲這個很不錯。
看以上屬性效果，[點擊]https://www.cnblogs.com/xiaobaiv/p/9020335.html