先抄一張圖，表示了彈性盒子元素的組成，分為main軸和cross軸，start和end代表軸的兩端。
彈性盒子的子元素的float、clear和vertical-align屬性将失效。
彈性容器的6個屬性：
1.flex-direction
用于規定彈性項目的排列方向。
row：水準
row-reverse：水準逆序
column ：豎直
column-reverse：豎直逆序
2.flex-wrap
用于規定項目一排空間不夠時如何換行。
nowrap：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方
3.flex-flow
是flex-direction和flex-wrap的簡寫預設值為 flex-flow:row nowrap;
4.justify-content
規定項目在main軸上的對齊方式（水準對齊方式）。
flex-start：左對齊（預設）
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。是以，項目之間的間隔比項目與邊框的間隔大一倍
5.aligh-items
規定項目在cross軸是的對齊方式（豎直對齊方式）。
flex-start：豎直的頂端對齊
flex-end：豎直的底端對齊
center：豎直居中
baseline: 項目的第一行文字的底端對齊
stretch（預設值）：如果項目未設定高度或設為auto，将占滿整個容器的高度。
6.align-content
規定多根軸線時的對齊方式，隻有一根時失效。
flex-start：與cross軸的起點對齊
flex-end：與cross軸的終點對齊
center：與cross軸的中點對齊
space-between：與cross軸兩端對齊，軸線之間的間隔平均分布
space-around：每根軸線兩側的間隔都相等。是以，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch（預設值）：軸線占滿整個交叉軸
彈性項目的6個屬性
1.order
規定項目的排列順序，預設從小到大排列
2.flex-grow
規定項目放大比例，預設為0。值為非零的項目共同配置設定容器的空間，值越大放大得越大，值相同大小就相同。
3.flex-shrink
屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目将縮小。flex-shrink值越大，空間不夠時該項目縮小越多。如果各項目flex-shrink值相同，則縮小相同比例。
4.flex-basis
屬性定義了在配置設定多餘空間之前，項目占據的主軸空間（main size）。浏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大小。其實就是設多少這個項目就占多大空間，可以為固定值如100px。
5.flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為浏覽器會推算相關值。
6.align-self
允許單個項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性。
預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
圖檔來源于阮一峰老師http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html