。
Flex容器是什麼
任何容器都可以使用Flex佈局，當我們設定一個容器（一般是div）的display樣式為display: flex; display: inline-flex; 的時候，這個容器就是一個Flex容器。
Flex容器有幾個比較重要的概念：
1、水平主軸(main axis) 和垂直交叉軸(cross axis)，預設情況下，水平方向為main axis，垂直方向為cross axis，當然你也可以手動修改，使水平方向為cross axis，垂直方向為main axis，這個我們一般不需要修改。
2、flex item：Flex容器中的每一個項被稱為flex item。
3、主軸空間、交叉軸空間：我們可以簡單的這麼理解， 每個flex item在主軸方向上的寬度為主軸空間。每個flex item在垂直方向上的高度為交叉軸空間。
Flex容器樣式
在Flex容器上可以設定的css樣式主要有六個，分別是flex-direction、flex-wrap、 flex-flow、 justify-content、 align-items、 align-content。接下來依次介紹這幾個屬性
容器樣式1：flex-direction：設定主軸的方向，其實就是flex item的排列方向。
預設值：row：主軸為水平方向，flex item水平方向從左向右依次排列。
row-reverse：主軸為水平方向，flex item水平方向從右向左依次排列。
column：主軸為垂直方向，flex item垂直方向從上到下依次排列。
column-reverse：主軸為垂直方向，flex item垂直方向從下到上依次排列。
容器樣式2：flex-wrap：決定容器內專案是否可以換行
預設值nowrap：flex item不可以換行，主軸空間改變時，flex item的空間會隨著主軸空間會跟隨主軸調整。
wrap：主軸總尺寸超出容器尺寸的時候，換行。
wrap-reverse：主軸總尺寸超出容器尺寸的時候，換行，不過第一行在下面，而不是在上面。
容器樣式3：flex-flow：flex-direction和flex-wrap的簡寫。
語法如下：flex-flow: row nowrap;
容器樣式4：justify-content：定義了flex item在主軸上的對齊方式
預設值flex-start：左對齊
flex-end：右對齊。
center：居中對齊。
space-between：兩端對齊，專案之間間隔相等，左右兩邊貼著容器最左邊和最右邊。
space-around：每個flex item左右兩邊的距離相等，所有最左邊的距離和最右邊的距離比中間的距離少一倍。
容器樣式5：align-items：定義flex item在交叉軸的對齊方式
預設值stretch：填滿flex容器的高度。
flex-start：flex item高度不同的時候，頂部對齊。
flex-end：flex item高度不同的時候，底部對齊。
center：flex item高度不同的時候，垂直方向居中對齊。
baseline：第一個flex item中文字的基線對齊，一般用的少。
容器屬性6：align-content：定義多根軸線的對齊方式。 這個稍後學習
當你的flex-wrap設定為nowrap的時候，只有一根主軸，這個屬性不起作用。只有當flex item有可能換行的時候，這個屬性會起作用。
Flex Item屬性
除了可以在Flex容器上設定css樣式之外，還可以在每一個具體的flex item元素上設定css樣式，主要有以下樣式：order、flex-basis、flex-grow、flex-shrink、flex、align-self這幾個屬性。
Flex Item屬性1：order：定義flex item在flex容器中的位置
order預設值為0，數值越小，越排在前面。
Flex Item樣式2：flex-grow：定義專案在主軸的放大比例
如果主軸有剩餘的空間，flex-grow定義專案的空間如何放大。預設值為0，也就是不放大。如果flex-grow都設定為1的話，所有專案同比例放大，如果flex-grow設定為1：2的話，兩個flex item的空間比例為1：2。
那如果主軸的空間不夠用，就需要壓縮空間，這個時候壓縮空間的比例，就要用到下面這個屬性了。
Flex Item樣式3：flex-shrink：定義專案在主軸的縮小比例
預設值flex-shrink，當主軸空間不足的時候，不壓縮flex item的空間。
Flex Item樣式4：flex：flex-grow flex-shrink 和flex-basis 三個屬性的結合。
格式如下：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Flex Item樣式5：align-self 允許單個專案有自己在交叉軸的對齊方式
預設值auto，繼承flex容器的align-items的屬性。