申明：以下都是個人整理，如有錯誤之處，請指正，謝謝！
flexbox——一維佈局模型，只能處理一個維度（行或者列）上的佈局。由flex-container（flex容器）和flex-item（flex元素）構成，爲flex-item（flex元素）之間提供了強大的空間分佈和對齊能力。
彈性佈局是指通過調整flex-item的寬高，從而在任何顯示設備上實現對可用顯示空間最佳填充能力，要理解flexbox，需要先理解以下概念：
1 flex容器（彈性容器）
flex container：父級元素設置display:flex;或者display:inline-flex;屬性，將容器變爲flex容器。
flex item：flex容器的所有直接子元素自動成爲flex項。
主軸（main axis）：flex item依次排列的軸爲主軸。
交叉軸（cross axis）：垂直於主軸的軸爲交叉軸。
排列方向（flex direction）：彈性容器的主軸起點（main start）/ 主軸終點（main end）和側軸起點（cross start）/ 側軸終點（cross end）描述了彈性項目排布的起點和終點。
行（line）：根據flex-wrap屬性，flex item可以排布在單個行或者多個行中。
尺寸（Dimension）：根據主軸和側軸，flex item的寬和高中，對應主軸爲主軸尺寸（main size），對應側軸爲側軸尺寸（cross size）。
圖例解釋：
2 屬性詳解
以下屬性按照功能分類來介紹：
2.1 flex container屬性
1、flex-flow：flex-direction和flex-wrap的簡寫。默認值row nowrap。
2、flex-direction：定義主軸，交叉軸垂直於主軸。主要是改變主軸的方向和主軸的起點和終點。
row【從左到右排列一行】，默認值row-reverse【從右到左排列一行】column【從上到下排列成一列】column-reverse【從下到上排列成一列】
注：flex-direction並不是把flex item從主軸移到交叉軸上對齊，而是讓主軸自身從水平->垂直或者從垂直->水平。
3、flex-wrap：默認情況下，flex item都排列在一條軸線上，而flex-wrap定義如果一條軸線上排列不下時如何換行。
nowrap【不換行】，默認值wrap【換行，第一行在上方】wrap-reverse【換行，第一行在下方】
4、justify-content：定義flex item在主軸上的對齊方式。
flex-start【主軸起點對齊】，默認值flex-end【主軸終點對齊】center【主軸中點居中】space-between【主軸兩端對齊，flex item之間的間隔都相等】space-around【flex item兩側的間隔相等，flex item之間的間隔比項目兩邊的間隔大一倍】
注：flex item不可伸縮或者可伸縮已經達到最大尺寸的時候，可以分配主軸線上的剩餘空間時纔可以。
5、align-items：定義flex item在交叉軸上的對齊方式。
flex-start【當前交叉軸起點對齊】flex-end【當前交叉軸終點對齊】center【當前交叉軸中點對齊】baseline【flex item第一行文字的基線對齊】stretch【如果flex item未設置cross size或者設置爲auto，將鋪滿交叉軸方向的size】，默認值
注：當flex-wrap：wrap / wrap-reverse時，對應多條主軸線，按照主軸線可以將flex container分爲多個塊，每個塊內對應交叉軸和交叉軸的起始點，而上面的對齊是根據這裏每個塊的起始點；如果flex-wrap：nowrap時，爲特殊情形。
6、align-content：定義多根軸線的對齊方式，如果只有一條軸線，則該屬性不起作用。
flex-start【交叉軸起點對齊】flex-end【主軸終點對齊】center【主軸中點居中】space-between【交叉軸兩端對齊，flex item之間的間隔都相等】space-around【每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍】stretch【軸線佔滿整個交叉軸】，默認值
注：此時對應整個flex container容器的cross axis，注意這時只有一個cross start和一個cross end。
2.2 flex item屬性
1、flex：flex-grow、flex-shrink和flex-basic的簡寫。默認值0 1 auto。
注：
- 該屬性對應兩個快捷值：
auto【1 1 auto】和none【0 0 auto】； - 優先使用該屬性，不建議單獨分開寫三個屬性，因爲瀏覽器會推算相關值。
2、flex-grow：定義flex item的拉伸比例。
<number>【正整數，負數無效】，默認值爲0
注：按照比例分割剩餘的空間。例如：如果所有flex item的flex-grow屬性都爲1，則它們將等分剩餘空間（如果有的話）。如果一個flex item的flex-grow屬性爲2，其他項目都爲1，則前者佔據的剩餘空間將比其他項多一倍。
3、flex-shrink：定義flex item的收縮比例，即如果空間不足，該flex item將縮小。
<number>【從左到右排列一行】，默認值爲1
注：如果所有flex item的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。如果一個flex item的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。
4、flex-basic：定義flex item佔據的主軸空間（main size），根據此屬性計算主軸是否有多餘的空間。
auto【flex item本來的大小】，默認值<number>【可固定，如：350px；也可以設置百分比，如：25%】
注：如果flex-basic:auto;，則auto會解析爲其內容的大小，設置寬度時有min-content和max-content兩個值，此時flexbox 會將flex子元素的 max-content 大小作爲 flex-basis的值；
5、align-self：定義單個flex item與其他flex item不一樣的對齊方式。
auto【表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch】，默認值flex-start【當前交叉軸起點對齊】flex-end【當前交叉軸終點對齊】center【當前交叉軸中點對齊】baseline【flex item第一行文字的基線對齊】stretch【如果flex item未設置cross size或者設置爲auto，將鋪滿交叉軸方向的size】
注：
align-self：auto;時，其值被計算爲父級元素的align-items屬性的值，或者如果元素沒有父元素，那麼其值爲stretch；- 除了
auto，其他都與align-items屬性完全一致。
6、order：定義flex item排列順序。數值越小，排列越靠前。
<integer>【順序值】，默認值爲0
注：flex item可以使用這個簡單的屬性重新排序，而不需要重新修改HTML代碼。
7、min-width / min-height：定義flex item的main size的最小值。
8、max-width / max-height：定義flex item的main size的最大值。
3 瀏覽器兼容性
瀏覽器兼容性查看：https://caniuse.com/#feat=flexbox
參考鏈接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax