原文首發於微信公衆號：jzman-blog，歡迎關注交流！
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：設置主軸爲垂直方向，起點在下邊
| row | row-revarse | column | column-revarse |
|---|---|---|---|
 |
 |
 |
 |
- flex-wrap：設置如何換行，可設置的值如下：
- nowrap：默認值，不換行
- wap：自動換行
- wrap-revarse：自動換行，在第一行的上一行
| 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：平均分佈各個項目，與屏幕邊緣的間隔與其他項目之間的間隔相等
| flex-start | flex-end | center | space-between | space-around | space-evenly |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
- align-items：設置項目在交叉軸上如何對齊，可設置的值如下：:默認值，如果沒有項目未指定高度或設置爲auto,則項目會佔滿整個容器的高度，可設置的值如下：
- stretch：默認值，如果沒有項目未指定高度或設置爲auto,則項目會佔滿整個容器的高度，下面圖示中項目 1 就未指定高度，其餘項目都指定了高度
就未指定高度 - flex-start：設置與交叉軸的起點對齊
- flex-end：設置與交叉軸的結束點對齊
- center：設置與交叉軸的重點對齊
- baseline：設置項目與項目中第一行文字基線對齊
| stretch | flex-start | flex-end | center | baseline |
|---|---|---|---|---|
 |
 |
 |
 |
 |
- align-content：設置多根軸線的對齊方式，如果只有一個軸則該屬性不生效，可設置的屬性如下：
- stretch：默認值，軸線佔滿整個交叉軸
- flex-start：設置與與交叉軸的起點對齊
- flex-end：設置與交叉軸的終點對齊
- center：設置與交叉軸的中點對齊
- space-between：設置與交叉軸兩端對齊，軸線之間的間隔平均分佈
- space-around：設置每根軸線兩側的間隔都相等，軸線與軸線的間隔是軸線到交叉軸邊緣間隔的兩倍
| stretch | flex-start | flex-end | center | space-between | space-around |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
flex項目屬性
- order：默認值爲0，設置項目的排列順序，數值越小，排列越靠前，如下圖所示：
- flex-grow：設置項目的放大比例，默認值爲0，如果存在剩餘空間也不放大，如下圖所示：
| flow-grow=0 | flow-grow=1 | flow-grow設置不同值 |
|---|---|---|
 |
 |
 |
- flex-shrink：設置項目的縮小比例，默認值爲 1，如果項目空間不足，則項目將縮小，如下圖所示：
| flow-shrink=1 | flow-shrink=0 | flow-shrink設置不同值 |
|---|---|---|
 |
 |
 |
上面圖示中，當 flex-shrink 全設置爲 0，每個項目不會縮放，所以第四個方塊被擠出去了，而相應的設置 flex-shrink 爲 1，則可以在空間不足是進行一定程度的縮放。
- flex-basis：項目所佔的主軸空間，如下圖所示：
- align-self：定義元素自身的對齊方式，該屬性與 align-items 屬性差不多，具體就不一一介紹了，直接上效果圖如下：
| auto | stretch | flex-start | flex-end | center | baseline |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
上面的效果中設置 auto 會跟隨 flex 容器中 align-items 的設置。
- flex：flex 是 flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值爲0 1 auto，這裏就不在貼效果圖了。
總結
最近嘗試了一下微信小程序，感覺開發起來難度也不是很大，覺得本篇文章的內容也是微信小程序中最重要的內容了，本來打算繼續進行小程序系列的學習，但是看了一下後面的內容無非就是小程序各個組件的使用了，如果有其他項目的開發經驗，實在沒必要一個組件一個組件去驗證學習，所以小程序的學習就到此爲止，最後，說一點微信小程序最重要的我覺得還是 Flex 佈局。可以選擇關注個人微信公衆號：jzman-blog 獲取最新更新，一起交流學習!
