Flex 是 W3C 提出的一種新的布局方案，可以非常方便地完成響應式頁面布局，到目前為止幾乎所有瀏覽器都支持，Flex 是 Flexible Box 的縮寫，翻譯過來是 "彈性布局" 的意思，下面一起來學習 Flex 布局的使用。
- 基礎概念
- flex 容器屬性
- flex 項目屬性
- 總結
基礎概念#
採用 Flex 布局的元素稱為 Flex 容器，所有子元素將自動成為容器成員，也可以稱之為 Flex 項目，也就是該 Flex 布局的子 View ，下面是 Flex 布局默認設置下的示意圖：
如上圖所示，默認的 Flex 容器的存在兩個軸：水平的主軸 (main axis) 和垂直的交叉軸 (cross axis)，主軸和交叉軸的方向不是絕對的，而是會因為設置的不同而不同，下面是與主軸和交叉軸相關的幾個位置：
- 主軸起始點 (main start)：主軸的開始位置
- 主軸的結束點 (main end)：主軸的結束位置
- 主軸空間 (main size)：單個 Flex 項目佔據的主軸空間
- 交叉軸的起始點 (cross start)：交叉軸的起始點
- 交叉軸的結束點 (cross end)：交叉軸的結束點
- 交叉軸空間 (cross size)：單個 Flex 項目佔據的交叉軸空間
flex 容器屬性#
- flex-direction：設置主軸的方向，可設置的值如下：
- row：默認值，設置主軸為水平方方向，起點在左邊
- row-revarse：設置主軸為水平方向，起點在右邊
- column：設置主軸為垂直方向，起點在上邊
- column-revarse：設置主軸為垂直方向，起點在下邊
- flex-wrap：設置如何換行，可設置的值如下：
- nowrap：默認值，不換行
- wap：自動換行
- wrap-revarse：自動換行，在第一行的上一行
-
flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值為 row nowrap。
-
justify-content：設置項目在主軸上的對齊方式，可設置的值如下：
- flex-start：默認值，左對齊
- flex-end：右對齊
- center：居中對齊
- space-between：兩端對齊
- space-around：每個項目兩側的間隔相等，與螢幕邊緣的間隔是其他項目之間間隔的一半
- space-evenly：平均分佈各個項目，與螢幕邊緣的間隔與其他項目之間的間隔相等
- align-items：設置項目在交叉軸上如何對齊，可設置的值如下：: 默認值，如果沒有項目未指定高度或設置為 auto, 則項目會佔滿整個容器的高度，可設置的值如下：
- stretch：默認值，如果沒有項目未指定高度或設置為 auto, 則項目會佔滿整個容器的高度，下面圖示中項目 1 就未指定高度，其餘項目都指定了高度
就未指定高度 - flex-start：設置與交叉軸的起點對齊
- flex-end：設置與交叉軸的結束點對齊
- center：設置與交叉軸的重點對齊
- baseline：設置項目與項目中第一行文字基線對齊
- align-content：設置多根軸線的對齊方式，如果只有一個軸則該屬性不生效，可設置的屬性如下：
- stretch：默認值，軸線佔滿整個交叉軸
- flex-start：設置與與交叉軸的起點對齊
- flex-end：設置與交叉軸的終點對齊
- center：設置與交叉軸的中點對齊
- space-between：設置與交叉軸兩端對齊，軸線之間的間隔平均分佈
- space-around：設置每根軸線兩側的間隔都相等，軸線與軸線的間隔是軸線到交叉軸邊緣間隔的兩倍
flex 項目屬性#
- order：默認值為 0，設置項目的排列順序，數值越小，排列越靠前，如下圖所示：
- flex-grow：設置項目的放大比例，默認值為 0，如果存在剩餘空間也不放大，如下圖所示：
- flex-shrink：設置項目的縮小比例，默認值為 1，如果項目空間不足，則項目將縮小，如下圖所示：
上面圖示中，當 flex-shrink 全設置為 0，每個項目不會縮放，所以第四個方塊被擠出去了，而相應的設置 flex-shrink 為 1，則可以在空間不足是進行一定程度的縮放。
- flex-basis：項目所佔的主軸空間，如下圖所示：
- align-self：定義元素自身的對齊方式，該屬性與 align-items 屬性差不多，具體就不一一介紹了，直接上效果圖如下：
上面的效果中設置 auto 會跟隨 flex 容器中 align-items 的設置。
- flex：flex 是 flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值為 0 1 auto，這裡就不在貼效果圖了。
總結#
最近嘗試了一下微信小程序，感覺開發起來難度也不是很大，覺得本篇文章的內容也是微信小程序中最重要的內容了，本來打算繼續進行小程序系列的學習，但是看了一下後面的內容無非就是小程序各個組件的使用了，如果有其他項目的開發經驗，實在沒必要一個組件一個組件去驗證學習，所以小程序的學習就到此為止，最後，說一點微信小程序最重要的我覺得還是 Flex 布局。