Flexbox 佈局它是CSS3新增的一種佈局模式。可以很方便地用來改善動態或未知大小的元素的對齊，方向和順序等等。flex容器的主要特性是它可以調整其子元素的寬度或高度去填充可用的空白區，以最優的方式達到相容不同螢幕大小。
Flexbox是佈局模組，而不是一個簡單的屬性，它包含父元素和子元素的屬性。

flexbox的術語

先了解flexbox的幾個常用術語，這樣後面會更好理解；
伸縮容器：一個設有“display:flex”或“display:inline-flex”的元素
伸縮專案：伸縮容器的子元素
主軸、主軸方向：使用者代理沿著一個伸縮容器的主軸配置伸縮專案，主軸是主軸方向的延伸。
主軸起點、主軸終點

：伸縮專案的配置從容器的主軸起點邊開始，往主軸終點邊結束。
主軸長度、主軸長度屬性：伸縮專案的在主軸方向的寬度或高度就是專案的主軸長度，伸縮專案的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。
側軸、側軸方向：與主軸垂直的軸稱作側軸，是側軸方向的延伸。
側軸起點、側軸終點：填滿專案的伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
側軸長度、側軸長度屬性：伸縮專案的在側軸方向的寬度或高度就是專案的側軸長度，伸縮專案的側軸長度屬性是「width」或「height」屬性，由哪一個對著側軸方向決定。
伸縮容器中各種方向與大小術語的示意圖：

屬性介紹

父容器的屬性

1. display: flex | inline-flex ；定義一個flex容器，內聯或者根據指定的值，來作用於下面的子類容器。
   flex：將物件作為彈性伸縮盒顯示。
   inline-flex：將物件作為內聯塊級彈性伸縮盒顯示。
   如圖示，子div沒有設定float，只是將父容器設定display: flex：
   
2. flex-direction ；設定或檢索伸縮盒物件的子元素在父容器中的位置。
   row：橫向從左到右排列（左對齊），預設的排列方式。
   row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
   column：縱向排列。
   column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
   
3. flex-wrap ；設定或檢索伸縮盒物件的子元素超出父容器時是否換行。
   nowrap：當子元素溢位父容器時不換行，通過收縮每個子元素的寬度來擠在一行。
   wrap：當子元素溢位父容器時自動換行。
   wrap-reverse：反轉 wrap 排列。
   
4. flex-flow : <‘flex-direction’> || <‘flex-wrap’>；複合屬性；
5. justify-content ：設定或檢索彈性盒子元素在主軸方向上的對齊方式。
   flex-start：彈性盒子元素將向行起始位置對齊。
   flex-end：彈性盒子元素將向行結束位置對齊。
   center：彈性盒子元素將向行中間位置對齊。
   space-between：彈性盒子元素會平均地分佈在行裡。第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒專案則平均分佈，並確保兩兩之間的空白空間相等。
   space-around：彈性盒子元素會平均地分佈在行裡，兩端保留子元素與子元素之間間距大小的一半。
   如圖：
   
6. align-items ；設定或檢索彈性盒子元素在側軸方向上的對齊方式。
   flex-start：彈性盒子元素的側軸起始位置的邊界緊靠住該行的側軸起始邊界。
   flex-end：彈性盒子元素的側軸結束位置的邊界緊靠住父容器的側軸結束邊界。
   center：彈性盒子元素在該行的側軸上居中放置。
   baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對齊。
   stretch：如果指定側軸大小的屬性值為’auto’，則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照’min/max-width/height’屬性的限制。
   
7. align-content ；設定或檢索彈性盒堆疊伸縮行的對齊方式。
   flex-start：各行向彈性盒容器的起始位置堆疊。。
   flex-end：各行向彈性盒容器的結束位置堆疊。
   center：各行向彈性盒容器的中間位置堆疊。
   space-between：各行在彈性盒容器中平均分佈。第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。
   space-around：各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。
   stretch：各行將會伸展以佔用剩餘的空間。剩餘空間被所有行平分，以擴大它們的側軸尺寸。
   
   子元素的屬性
   
   1. order ; 用整數值來定義排列順序，數值小的排在前面。可以為負值。
      ：用整數值來定義排列順序，數值小的排在前面。可以為負值。
      
   2. flex-grow；設定或檢索彈性盒的擴充套件比率。
      ：用數值來定義擴充套件比率。不允許負值，預設為0；
      
   3. flex-shrink ；設定或檢索彈性盒的收縮比率。就是如果子元素的總寬度超過了容器寬度（主軸），那麼這個屬性定義瞭如何把超過的那部分平分到每個孩子身上，然他們按比例來縮小一定的寬度從而可以在容器中裝得下。
      ：用數值來定義收縮比率。不允許負值，預設為1；
      
   4. flex-basis ；設定或檢索彈性盒伸縮基準值。也就是在在分配空白之前子元素的寬度預設是 auto，也就是本身的寬度，如果定義了 flex-basis: 50px; ，那麼它就會覆蓋掉孩子的寬度此時子元素的寬度為50px。
   5. flex ；複合屬性。設定或檢索伸縮盒物件的子元素如何分配空間。
      flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
      如果縮寫flex:1, 則其計算值為：1 1 0；
      none：none關鍵字的計算值為: 0 0 auto；