認真看看那正在熱潮的 flex 響應式佈局
flex 佈局，是一個廣義的說法，不能說：加了 display:flex 就能夠實現響應式佈局，以 flex 屬性為中心，還有一套全家桶等著你，家庭成員有：align-content、align-items、flex( flex-grow flex-shrink flex-basis )、flex-flow ( flex-direction flex-wrap )、justify-content、order 。
注意 3 個點：
- 多欄佈局的 column-* 屬性對彈性項目無效。
- float 與 clear 對彈性項目無效。（使用 float 只會使元素的 display 屬性變成 block ）
- vertical-align 對彈性項目的對齊無效。
1.默認的
如果下級元素定義了長度，而且僅是對父元素添加 flex 屬性，那麼從左到右排序，有兩種情況
1、子元素總長度小於父元素，空餘的地方留空。
如下圖
2、子元素總長度大於父元素，子元素原有設定的長度將失效，變成：子元素長度 = 父元素長度 / 子元素個數。
如下圖
2.flex-grow
默認值：0 ，簡寫：flex: flex-grow flex-shrink flex-basis;
簡要說明：用來佔據你的綠~~
詳細說明：用來對剩餘長度佔比的屬性，前提子元素總長度小於父元素。
佔比總長度 = 父元素長度 - 子元素長度*子元素個數
如下圖，綠色部分為佔比總長度：
如果只有其中一個寫了 flex-grow 屬性，那麼它的長度將會是：這麼長 = 佔比總長度 / 你寫的數值 + 本身長度。
如下圖，只有區塊 2 寫了 flex-grow 的值：
它是這麼來的，下圖：
提示：flex-grow 的數值不能為負數，可以寫小數，但不能寫百分比。
注意：只有一個標籤寫了該屬性時，數值 1 為佔據 100% ，即每 0.1 佔據 佔比總長度的10% 長度。
3.flex-shrink
默認值：1 ，簡寫：flex: flex-grow flex-shrink flex-basis;
簡要說明：我越大，你們就越膨脹
詳細說明：用來對超出部分的長度控制縮減的屬性。當子元素的長度相加大於總長度時，纔可以發生作用。
縮減總長度 = 子元素長度*子元素個數 - 父元素長度
如下圖，虛線部分為縮減的總長度
那麼它的長度計算是這麼計算的：這麼長 = 當前元素設定元素的長度 - 縮減總長度 / 所有 shrink 值相加 * 當前元素的 shrink 值
示例，如下圖區塊 2 值為 3，區塊 4 為 4，其它沒寫的區塊默認為 1。
提示：flex-shrink 的數值不能為負數，可以寫小數，但不能寫百分比。
4.flex-basic
默認值： auto ，簡寫：flex: flex-grow flex-shrink flex-basis;
簡要說明：算了，先放著
詳細說明：覆蓋當前元素設定的長度(width)，重新定義當前元素的長度，前提是定義的長度值(basic)不能比當前字元串加起來的長度值小。
由下圖可以看到，原字元長度為 86.33px ，如果設定寬度數值小於這個長度，還是這長度...
子元素全部按百分比的話，例如該百分比為18% ，那麼子元素會是：這麼長 = 父元素的長度 * 18%。
如圖： 800 * 18% = 144
如果只有其中一個寫了 flex-basic 屬性，並且還是百分比的話，那麼當前元素會是： 這麼長 = 父元素長度 / (當前子元素百分比 + (子元素設定長度 / 父元素長度 * ( 子元素個數 - 1 ) ) * 當前子元素百分比 ；
示例 1 、
示例 2 、區塊 2 為 50% ，區塊 4 為 100%，其他區塊為 25% = 0.25 = 200 / 800 ，那麼計算如圖所示：
注意：flex-basic 的數值不能為負數。
5.flex-direction
默認值：row ，簡寫：flex-flow: flex-direction flex-wrap;
簡要說明：別跑，跟我走。
詳細說明：規定子元素的展示方向，默認從左往右，自上往下。
如圖，默認值 row 與 row-reverse , 方向完全反轉了，起點和終點互換角色。
row 是從左往右，自上往下；row-reverse 是從右往左，自上往下。
屬性影響
注意：有一個影響屬性 direction ，該值會影響值 row 的方向，但對值 column 無影響。
如果設置了該屬性將會有以下幾種情況：
direction:ltr +--> flex-direction:row ------------->默認從左往右 direction:ltr +--> flex-direction:row-reverse ---->默認從右往左 direction:rtl +--> flex-direction:row ------------->將默認的從左往右變成從右往左 direction:rtl +--> flex-direction:row-reverse ---->將默認的從右往左變成從左往右
如圖：
column 的值在於從上往下排序，column-reverse 方向與 column 方向相反，自下而上。
如下方，值 column 圖例：
值 column-reverse 圖例：
注意：float 對該值無效，值 column 將會令原有元素設定的高度失效，高度變為適用內容的高度。
6.flex-wrap
默認值：nowrap ，簡寫：flex-flow: flex-direction flex-wrap;
簡要說明：後面排隊的過來這兒(wrap)再排一行。
詳細說明：默認的 flex 佈局是不換行的，如果要換行，請用 flex-wrap 控制。
默認的，不換行的情況下，子元素超出父元素長度時，子元素的長度等於父元素除以子元素的個數，也就是說原有的設定的子元素寬度失效，而如果換行的情況下，子元素的設定寬度不會失效，子元素超出父元素長度時，將自上往下，從左往右的排序。
如圖：設定子元素寬度為 200px ，父元素寬度為 800px;
默認值 nowrap 圖例
值 wrap 圖例
如果值為 wrap-reverse 那麼它的順序將會是自下往上，從左往右。wrap 與於 wrap-reverse 不同的是上下展示的方向的不同。
如下圖：
flex-flow 其他情況圖例
- flex-flow: column wrap; 下圖 1
- flex-flow: column wrap-reverse; 下圖 2
- flex-flow: row-reverse wrap; 下圖 3
- flex-flow: row-reverse wrap-reverse; 下圖 4
圖 1 + 圖 2
圖 3 + 圖 4
7.order
默認值：0
簡要說明：給錢(integer)我，就讓你排前面
詳細說明：對當前項進行排序，當元素設定該值時，元素就位於該數值位置，同數值元素將按照文檔讀取順序排序。
如圖所示：指定了某些區塊的 order 值。
注意：值可以接受負數但不能為小數點。
8.align-content
默認值：stretch
簡要說明：單排的一邊去
詳細說明：對當前行所有子元素進行對齊，根據值進行位移，對單行所有子元素無效，對單個子元素設該屬性無效。
注意：多考慮瀏覽器特性，部分瀏覽器不支持導致某些屬性效果為 baseline 的效果。
如下圖：默認子元素 200px * 6 ，寬度 900px ，高度 300px。
默認值 stretch 平分了父元素餘下的高度，以平分的高度開始基線進行對齊，保證與下一行間隔一致，末行將與高度底部間隔。
注意：若其中某子元素未定義高度，它將會填滿至下一行，無縫連接下一行。
值 baseline 圖例
值 baseline 以元素高度為基準，在開始位置進行對齊，類似後面的 start 。值 first baseline 及 last baseline 估計還在實驗中，並未得到實現。
值 center 圖例
值 center 於 baseline 類似，不過它實現的是上下位置居中對齊。
值 flex-start 和 flex-end 圖例
非溢出情況
溢出情況
值 flex-start 和 flex-end 為以父元素高度的開始基線對齊和以父元素高度的結束基線對齊（繞口，請看上方的溢出及非溢出圖）。
貌似後面出的 start 及 end 測試有效，但 left 和 right 估計還在實驗中，並未得到實現。
值 space-around 圖例
值 space-around 平分了父元素餘下的高度，並且在平分的高度中，上下位置居中對齊。
值 space-between 圖例
值 space-between 首行元素粘合父元素開始基線，尾行元素粘合父元素結束基線，其餘行平分剩下高度餘下的值，並保證行之間距離一樣。
值 space-evenly 圖例
值 space-evenly 平分了父元素餘下的高度，並保證每行間隔一樣。
9.align-item
默認值 stretch
簡要說明：來來來，我們一起膨脹
詳細說明：對當前行的子元素進行對齊，可對單行進行賦值，但對單個子元素無效。
和 align-content 區別？align-item 是控制行內子元素對齊， align-content 是控制行對齊... 注意：多考慮瀏覽器特性，部分瀏覽器不支持導致某些屬性效果為 baseline 的效果。
默認值 stretch 如下圖：
值 baseline 圖例
值 baseline ，以每行的間隔開始基線對齊，如不填寫高度，將默認為內容高度。
值 center 圖例
值 center ， 平分父元素餘下的高度，並且每行自身上下間隔一樣（以行內最大高度為基準），如不填寫高度，將默認為內容高度。
值 flex-star 和 flex-end 圖例
值 flex-star 和 flex-end , 平分父元素餘下的高度，並且每行上(end)或下(start)間隔一樣（以行內最大高度為基準），與後來的 start 及 end 貌似一樣效果。
10.justify-content
默認值 stretch
簡要說明：別惹事，站開點
詳細說明：與 align-item 類似，不過它是用來對行內元素的水平對齊的控制。
注意：多考慮瀏覽器特性，部分瀏覽器不支持導致某些屬性效果為 baseline 的效果。
默認值 stretch ，如下圖：
與值 baseline ，貌似於默認值沒區別。
值 center 圖例
值 center ，集中所有子元素並水平居中對齊。
值 flex-star 和 flex-end 圖例
值 flex-star 和 flex-end , 集中所有子元素並水平居左(start)或右(end)對齊。 與後來的 start 及 end 貌似一樣效果。
值 space-around 圖例
值 space-around ，水平分散對齊，並保證每個子元素自身的間隔一致。
值 space-between 圖例
值 space-between ，水平分散對齊，首列粘合左邊位置，末列粘合右邊，其餘列左右間隔對齊，並保持一致。
值 space-evenly 圖例
值 space-evenly , 水平分散對齊，並保證每個元素間隔一致。
部分元素未得到測試，後續支持再添加。
完畢！
如有錯漏，望不吝指出，感謝。
文章摘自大朗博客：認真看看那正在熱潮的 flex 響應式佈局
推薦閱讀：
