Flex 是 W3C 提出的一種新的布局方案，可(kě)以非常方便的完成響應式頁面布局，到目前為止幾乎所有浏覽器(qì)都支持，Flex 是 Flexible Box 的縮寫，翻譯過來是”彈性布局”的意思，下(xià)面一起來學習 Flex 布局的使用。

1. 基礎概念
2. flex容器(qì)屬性
3. flex項目屬性
4. 總結

基礎概念

采用 Flex 布局的元素稱為 Flex 容器(qì)，所有子(zǐ)元素将自動(dòng)成為容器(qì)成員，也可(kě)以稱之為 Flex 項目，也就是該 Flex 布局的子(zǐ) View ,下(xià)面是 Flex 布局默認設置下(xià)的示意圖：

如(rú)上圖所示，默認的 Flex 容器(qì)的存在兩個(gè)軸：水平的主軸(main axis)和(hé)垂直的交叉軸(cross axis)，主軸和(hé)交叉軸的方向不是絕對的，而是會因為設置的不同而不同，下(xià)面是與主軸和(hé)交叉軸相關(guān)的幾個(gè)位置：

• 主軸起始點(main start):主軸的開始位置
• 主軸的結束點(main end):主軸的結束位置
• 主軸空間(main size):單個(gè) Flex 項目占據的主軸空間
• 交叉軸的起始點(cross start):交叉軸的起始點
• 交叉軸的結束點(cross end):交叉軸的結束點
• 交叉軸空間(cross size):單個(gè) Flex 項目占據的交叉軸空間

flex容器(qì)屬性

1. flex-direction：設置主軸的方向，可(kě)設置的值如(rú)下(xià)：

• row：默認值，設置主軸為水平方方向，起點在左邊
• row-revarse：設置主軸為水平方向，起點在右邊
• column：設置主軸為垂直方向，起點在上邊
• column-revarse：設置主軸為垂直方向，起點在下(xià)邊

2. flex-wrap：設置如(rú)何換行，可(kě)設置的值如(rú)下(xià)：

• nowrap：默認值，不換行
• wap：自動(dòng)換行
• wrap-revarse：自動(dòng)換行，在第一行的上一行

3. flex-flow：flex-direction 屬性和(hé) flex-wrap 屬性的簡寫形式，默認值為 row nowrap。

4. justify-content：設置項目在主軸上的對齊方式，可(kě)設置的值如(rú)下(xià)：

• flex-start：默認值，左對齊
• flex-end：右對齊
• center：居中(zhōng)對齊
• space-between：兩端對齊
• space-around：每個(gè)項目兩側的間隔相等，與屏幕邊緣的間隔是其他項目之間間隔的一半
• space-evenly：平均分布各個(gè)項目，與屏幕邊緣的間隔與其他項目之間的間隔相等

5. align-items：設置項目在交叉軸上如(rú)何對齊，可(kě)設置的值如(rú)下(xià)：:默認值，如(rú)果沒有項目未指定高度或設置為auto,則項目會占滿整個(gè)容器(qì)的高度，可(kě)設置的值如(rú)下(xià)：

• stretch：默認值，如(rú)果沒有項目未指定高度或設置為auto,則項目會占滿整個(gè)容器(qì)的高度，下(xià)面圖示中(zhōng)項目 1 就未指定高度，其餘項目都指定了高度
  就未指定高度
• flex-start：設置與交叉軸的起點對齊
• flex-end：設置與交叉軸的結束點對齊
• center：設置與交叉軸的重點對齊
• baseline：設置項目與項目中(zhōng)第一行文(wén)字基線對齊

6. align-content：設置多根軸線的對齊方式，如(rú)果隻有一個(gè)軸則該屬性不生效，可(kě)設置的屬性如(rú)下(xià)：

• stretch：默認值，軸線占滿整個(gè)交叉軸
• flex-start：設置與與交叉軸的起點對齊
• flex-end：設置與交叉軸的終點對齊
• center：設置與交叉軸的中(zhōng)點對齊
• space-between：設置與交叉軸兩端對齊，軸線之間的間隔平均分布
• space-around：設置每根軸線兩側的間隔都相等，軸線與軸線的間隔是軸線到交叉軸邊緣間隔的兩倍

flex項目屬性

1. order：默認值為0，設置項目的排列順序，數值越小，排列越靠前，如(rú)下(xià)圖所示：

2、flex-grow：設置項目的放大比例，默認值為0，如(rú)果存在剩餘空間也不放大，如(rú)下(xià)圖所示：

3. flex-shrink：設置項目的縮小比例，默認值為 1，如(rú)果項目空間不足，則項目将縮小，如(rú)下(xià)圖所示：

上面圖示中(zhōng)，當 flex-shrink 全設置為 0，每個(gè)項目不會縮放，所以第四個(gè)方塊被擠出去了，而相應的設置 flex-shrink 為 1，則可(kě)以在空間不足是進行一定程度的縮放。

4. flex-basis：項目所占的主軸空間，如(rú)下(xià)圖所示：

align-self：定義元素自身的對齊方式，該屬性與 align-items 屬性差不多，具體就不一一介紹了，直接上效果圖如(rú)下(xià)：