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

1. 基礎(chǔ)概念
2. flex容器屬性
3. flex項目屬性
4. 總結(jié)

基礎(chǔ)概念

采用 Flex 布局的元素稱為 Flex 容器，所有子元素將自動成為容器成員，也可以稱之為 Flex 項目，也就是該 Flex 布局的子 View ,下面是 Flex 布局默認(rèn)設(shè)置下的示意圖：

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

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

flex容器屬性

1. flex-direction：設(shè)置主軸的方向，可設(shè)置的值如下：

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

2. flex-wrap：設(shè)置如何換行，可設(shè)置的值如下：

• nowrap：默認(rèn)值，不換行
• wap：自動換行
• wrap-revarse：自動換行，在第一行的上一行

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

4. justify-content：設(shè)置項目在主軸上的對齊方式，可設(shè)置的值如下：

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

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

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

6. align-content：設(shè)置多根軸線的對齊方式，如果只有一個軸則該屬性不生效，可設(shè)置的屬性如下：

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

flex項目屬性

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

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

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

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

4. flex-basis：項目所占的主軸空間，如下圖所示：

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