微信小程序之Flex容器詳解

原文首發於微信公衆號：jzman-blog，歡迎關注交流！

Flex 是 W3C 提出的一種新的佈局方案，能夠很是方便的完成響應式頁面佈局，到目前爲止幾乎全部瀏覽器都支持，Flex 是 Flexible Box 的縮寫，翻譯過來是"彈性佈局"的意思，下面一塊兒來學習 Flex 佈局的使用。

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

基礎概念

採用 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容器屬性

1. flex-direction：設置主軸的方向，可設置的值以下：

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

row	row-revarse	column	column-revarse

2. flex-wrap：設置如何換行，可設置的值以下：

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

nowrap	wap	wrap-revarse

3. flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap。

4. justify-content：設置項目在主軸上的對齊方式，可設置的值以下：

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

flex-start	flex-end	center	space-between	space-around	space-evenly

5. align-items：設置項目在交叉軸上如何對齊，可設置的值以下：:默認值，若是沒有項目未指定高度或設置爲auto,則項目會佔滿整個容器的高度，可設置的值以下：

• stretch：默認值，若是沒有項目未指定高度或設置爲auto,則項目會佔滿整個容器的高度，下面圖示中項目 1 就未指定高度，其他項目都指定了高度 就未指定高度
• flex-start：設置與交叉軸的起點對齊
• flex-end：設置與交叉軸的結束點對齊
• center：設置與交叉軸的重點對齊
• baseline：設置項目與項目中第一行文字基線對齊

stretch	flex-start	flex-end	center	baseline

6. align-content：設置多根軸線的對齊方式，若是隻有一個軸則該屬性不生效，可設置的屬性以下：

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

stretch	flex-start	flex-end	center	space-between	space-around

flex項目屬性

1. order：默認值爲0，設置項目的排列順序，數值越小，排列越靠前，以下圖所示：

2. flex-grow：設置項目的放大比例，默認值爲0，若是存在剩餘空間也不放大，以下圖所示：

flow-grow=0	flow-grow=1	flow-grow設置不一樣值

3. flex-shrink：設置項目的縮小比例，默認值爲 1，若是項目空間不足，則項目將縮小，以下圖所示：

flow-shrink=1	flow-shrink=0	flow-shrink設置不一樣值

上面圖示中，當 flex-shrink 全設置爲 0，每一個項目不會縮放，因此第四個方塊被擠出去了，而相應的設置 flex-shrink 爲 1，則能夠在空間不足是進行必定程度的縮放。

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

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

auto	stretch	flex-start	flex-end	center	baseline

上面的效果中設置 auto 會跟隨 flex 容器中 align-items 的設置。

5. flex：flex 是 flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值爲0 1 auto，這裏就不在貼效果圖了。

總結

最近嘗試了一下微信小程序，感受開發起來難度也不是很大，以爲本篇文章的內容也是微信小程序中最重要的內容了，原本打算繼續進行小程序系列的學習，可是看了一下後面的內容無非就是小程序各個組件的使用了，若是有其餘項目的開發經驗，實在不必一個組件一個組件去驗證學習，因此小程序的學習就到此爲止，最後，說一點微信小程序最重要的我以爲仍是 Flex 佈局。能夠選擇關注我的微信公衆號：jzman-blog 獲取最新更新，一塊兒交流學習!