寫給 Android 開發的小程序佈局指南，Flex 佈局！

1、序

Hi，你們好，我是承香墨影！

最近在作小程序，驗證一些方向，開發效率確實很快，就是各類微信的審覈有點費勁，可是總歸是有辦法解決的。

想要開發一款小程序，其實和咱們正常寫一款 App 相似，你須要有精美的前端佈局，而且同時還須要處理和前端 UI 組件的交互以及它們背後的邏輯。

最近會分享一些關於小程序的內容（不保證，想到哪裏寫到哪裏），今天先說說接觸小程序第一步：佈局。

若是有前端經驗的話，小程序是很是容易上手的，而對於新手，第一步固然是閱讀小程序的官方文檔，不過以後你立刻就要面臨佈局的問題。

在小程序的開發框架中，會使用 Flex 排版佈局，它能夠幫助咱們快速的在小程序中進行 UI 佈局。雖然說 Flex 如今已經被主流瀏覽器所支持，可是 flex 在一些低版本的瀏覽器上還有些許兼容的問題。不過在小程序中，這就不是咱們須要考慮的了，微信已經幫咱們處理好了。

接下來我就以完整的小程序來作示例，說說 flex 佈局的那些事情。話很少說，言歸正傳。

2、什麼是 Flex

Flex 是 2009 年，W3C 提出的一種新的佈局適配方案，經過 Flex 佈局，能夠簡便、完整、響應式的實現各類頁面佈局。通過這些年的發展，已經獲得了全部瀏覽器的支持，基本上可讓咱們放心使用。

Flex 佈局是 Flexible Box 的縮寫，直譯過來就是 "彈性盒子"，它也是基於 "盒子" 模型，將 UI 切割成一個一個小的盒子，來進行 UI 佈局。

若是你不是在開發小程序，而是想單純的開發移動前端，你也可使用 Flex 佈局。雖然 Flex 已經被全部瀏覽器支持，可是架不住有一些老舊的瀏覽器，例如：IE 9，也是存在不支持的狀況的。不過咱們只是開發小程序，就徹底不用擔憂這一點。

3、Flex 如何使用

3.1 概述

Flex 的使用很是的簡單，你只須要將 display 設置爲 flex 就能夠了。

display 除了 flex 還有一些其餘可選參數，具體的你能夠參見文檔。

而在新手階段，暫時只須要關注兩個參數：

• block ：指定一個塊級佈局，它其內的元素，老是起一個新行來顯示，而微信小程序的不少視圖容器組件，默認的 displa 就是 block，例如：view、scroll-view、swiper 等。
• flex：指定爲 Flex 佈局，它能夠在盒子內顯示子元素。

舉個例子，看一下效果圖：

在這裏，當不作特殊設置的時候，默認爲 display:block 的狀態，其內的每個元素，都另起一行去展現。 display:flex 的話，咱們就能夠自由設置其內元素的佈局形式，這裏只是顯示了 flex 默認的效果，實際上咱們還能夠經過 Flex 提供的不一樣的屬性，進行更靈活的佈局。

3.2 Flex 的方向軸

想要掌握 Flex 佈局，你的心中時刻都須要有一個方向軸的概念。

在 Flex 佈局中，自然存在兩根方向軸：主軸和交叉軸。交叉軸在有些地方又被稱爲側軸，實際上是一個概念。

在默認狀況下，主軸是沿着水平方向延伸，而交叉軸則正好與主軸呈交叉狀態。

可是這並不是不可改變，咱們能夠經過 flex-direction 屬性，來改變主軸的方向，交叉軸的方向是相對於主軸存在的，當咱們改變主軸方向後，交叉軸也被同時改變。

既然 Flex 佈局也是經過一些屬性來控制效果的，和咱們正常寫一個移動 App 是同樣的，有一些屬性是做用在父容器中的，有一些是做用在其內的子元素上的。

接下來咱們就來分開講解，這些 Flex 佈局的時候，你須要使用到的屬性。

3.3 Flex 在父容器上的屬性

在父容器上，存在的屬性有：

• flex-direction：指定主軸的方向。
• flex-wrap：指定超出父容器的時候，子元素的排列樣式。
• flex-flow：flex-direaction 和 flex-wrap 兩個屬性的組合簡寫形式。
• justify-content：子元素在主軸的排列方向。
• align-items：子元素在交叉軸上的排列方向。
• align-content：多根軸線的對齊方式。

這幾個，除了 align-content 都是相對比較經常使用的屬性。接下來咱們就一一介紹這些屬性，以及在小程序中的使用效果。

1) flex-direction

前面也提到，flex 佈局有兩條軸，它們是交叉相對的，分爲主軸和交叉軸。咱們能夠經過 flex-direction 來肯定主軸的方向，同時交叉軸的方向也被肯定了。

在 flex 佈局中，除了橫豎兩個軸以外，軸還有起始點（start）和結束點（end）的概念，加載一塊兒 flex-direction 有四個屬性。

• row：默認值，主軸水平方向，起始點在左邊。
• row-reverse：主軸水平方向，起始點在右邊。
• column：主軸垂直方向，起始點在上邊。
• column-reverse：主軸垂直方向，起始點在下邊。

這個雖然很是好理解，可是咱們依然在小程序中看看效果。

2）flex-wrap

flex-wrap 屬性用來肯定，父容器內，當單行已經沒法包容全部子元素以後，如何換行。

• nowrap：不換行，此爲默認值。
• wrap：超出單行的時候，天然換行。
• wrap-reverse：超出單行的時候，沿着底部翻轉方向，天然換行。

css 裏就是有不少屬性是帶有 xxx-reverse 參數的，大多數狀況下咱們也用不上，不過仍是瞭解一下沒壞處。

雖然圖片已經很清晰了，從 flex-wrap:wrap 中，能夠看出 A、B、C 三個元素，實際上寬度是不一致的。

通常在單純的介紹 flex-wrap:wrap 屬性的文章，實際上是會說將多餘的部分切割在父佈局以外。

我也盜個圖，看看別人教程裏顯示的效果。

實際上若是你在純前端的環境中，使用 flex-wrap:wrap 也確實是這個效果，因此這並非錯誤，我理解這就是表現的差別。

可是在小程序中的表現並非這樣的，它最終會根據你設置的子元素的寬度，橫向的等比進行縮放，讓它能夠在當行內顯示的下。

在這個例子中，C 塊是寬度最寬的一個佈局，當咱們增長 C 塊的時候，看看這樣極端狀況下，flex-wrap:nowrap 在小程序中的表現。

能夠看到，它會等比例壓縮其內全部佈局的寬度，這是一點差別，須要特別注意。

3）flex-flow

flex-flow 是前面兩個屬性 flex-direction 和 flex-wrap 的簡寫組合。

在 css 中，不少屬性都是一些屬性的組合，是存在這種寫法的，中間使用空格分割就能夠了。

例如：

.ele {
  flex-flow: row nowrap;
}
複製代碼

這樣就能夠一次對兩個屬性進行設置，並不衝突。

4）justify-content

justify-content 能夠用來設置子元素，在主軸方向上的對齊方式。

它有五個可選項：

• flex-start：默認值，左對齊。
• flex-end：右對齊。
• center：居中。
• space-between：兩端對齊，元素之間等距。
• space-around：每一個子元素間隔相等，表現來看就是，元素距離邊框的距離，是元素與元素距離的一半。

justify-content 基本上看描述就知道效果了，不過 space-between 和 space-around 看似很像，可是實際上也是有差別的，咱們看看最終運行的效果是最清晰的。

能夠看到 space-around 是會保留左右的邊距，感受就像是爲每一個元素都增長了一個左右的 margin 屬性，而 space-between 則只在子元素之間存在距離。

5）align-items

align-items 屬性，能夠定義在交叉軸上，子元素的對齊方式。

它也存在五個選擇參數：

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸方向居中。
• baseline：子元素的第一個元素，內容基線對齊。
• stretch：默認參數，會在交叉軸上鋪滿父佈局。

注意 align-items:stretch 和前面咱們的屬性描述是不符合的，主要緣由是它有兩個限制。

• 父容器，必須限定高度。
• 子元素，必須沒有指定高度，寬仍是高，就取決於交叉軸的方向。

例如前面的代碼，咱們根據這裏的兩個限制進行修改。

align-items 還有一點須要注意的參數是 baseline，它是根據主軸方向，第一個元素的內容爲基準進行對齊，咱們把 A 塊，增長一個 margin-top 再來看看效果。

能夠看到，其餘屬性均有影響，可是 baseline 的時候，依然能夠保持子元素基於內容對齊。

6）align-content

align-content 屬性指定交叉軸上，元素的對齊方式，和 align-items 有點相似。通常移動端的 UI 佈局，都是傾向於列表形式無限向下延伸，因此 align-content 的用處其實不大。

可是當你須要作一個單頁效果，例如活動圖，就能夠利用上 align-content 屬性了。

align-content 有六個可選的屬性：

• stretch：默認值，拉伸佔滿交叉軸，和 align-items 限制相似。
• flex-start：與交叉軸起點對齊。
• flex-end：與交叉軸終點對齊
• center：以交叉軸居中。
• space-between：與交叉軸兩端對齊，而且子元素保持間距相等。
• space-around：在交叉軸方向，子元素與邊距，均保持相同距離。

其實咱們理解了 align-items ，對於 align-content 就很是好理解了。

沒什麼好多說的，直接上一個效果圖看看。

4、Flex 的子容器屬性

在 Flex 佈局的設定中，子元素有 6 個屬性：

• flex-grow：子元素剩餘空間的拉伸比例。
• flex-shrink：子元素超出空間，反向對子元素的拉伸比例。
• flex-basis：設定子元素，在不被拉伸狀況下的原始比例。
• flex：前三個屬性的集合屬性。
• order：設定子元素，顯示的順序。
• align-self：覆蓋父容器設定的 align-items 屬性，來操做子元素對交叉軸的對齊效果。

其實真正經常使用的就這麼些，咱們一個一個仔細分析，保持以前的風格，都會以小程序中，真實的效果截圖舉例。

1. flex-grow 屬性

flex-grow 屬性，能夠定義子元素在父元素中的伸縮比例，按照比例爲子元素分配不一樣的空間大小。

請注意看這裏給了兩個例子， A 例子中，A、B、C 三個子元素的 flex-grow 分別設置爲 一、二、3，而且每一個子元素的寬度，設置爲 5 rpx。

當設定了 flex-grow 以後，其內的子元素不注意佔滿整個父容器，就會按照 flex-grow 設定的比例，分配子元素的空間，flex-grow 的數值越小，佔據的空間越小。

以這裏的表現來看，flex-grow 從小到大佔據父容器的空間。

而 B 例子，咱們將子元素的寬度 width 屬性，設置爲 500rpx 以後，明顯一行已經不夠放下 3 個子元素了。這個時候 flex-grow 將不生效，將會呈現等比例排列。

此屬性想要生效，flex-wrap 必須設定爲 nowrap，意思是不容許換行，全部和比例相關的屬性，都須要 nowrap 加持。

但願你們熟悉這樣的舉例方式，後面的例子，均會以這樣的形式表示參數的設定。

width，爲子元素的寬度。

屬性：一、二、3 分別爲不一樣的值。

2. flex-shrink 屬性

flex-shrink 定義子元素，在容器以外的空間，呈比例反向縮放。

flex-shrink 既然是指定的超出父容器以外部分的縮放比例，若是全部的子元素，並不會超出父容器，此屬性將失效，如 A 例子中的效果。

而在 B 例子中，設定子元素寬度 width 爲 500rpx，超出父容器的部分，將成比例反向控制子元素的大小。

在這裏的表現，就是 flex-shrink 生效的狀況下，數值越小，佔據的空間越大。

3. flex-basis 屬性

flex-basis 用於定義子元素，在不伸縮狀況下的原始尺寸。

前面介紹的兩個屬性，不管是 flex-grow 和 flex-shrink，都會在不一樣的狀況下，改變子元素的縮放比例，若是咱們想設定子元素，在不出發縮放的狀況下，原始的大小，就可使用 flex-basis。

從例子中能夠看到，flex-basis 只在縮放不生效的時候，它纔會生效。

4. flex 屬性

前面介紹的三個屬性，不少屬性的效果實際上是互斥的，因此 Flex 佈局還提供了一個組合屬性 flex，用於對 flex-grow 、 flex-shrink 、 flex-basis 三個屬性的縮寫整合，默認值爲 0 1 auto，然後兩個屬性是可選屬性，也就是你不寫後兩個，等效於你只設置了 flex-grow。

爲了更方便，flex 屬性還提供了兩個快捷值：auto(1 1 auto) 和 none(0 0 auto)。

效果很簡單，就很少說明了。

5. order 屬性

order 能夠控制子元素，在父佈局的排列順序，數值越小，排列越靠前。

利用 order 咱們能夠不遵循 Flex 佈局裏，對子容器的編寫順序，都是能夠經過 order 修改的。

6. align-self 屬性

在上一篇文章中，咱們將了能夠經過父容器的 align-items 屬性，改變交叉軸上，子元素在交叉軸上的排列方向。而若是其中有子元素對這樣的方向排列不滿意，還能夠本身經過 align-self 屬性進行修改。

align-self 的默認值是 auto，表示繼承父容器的 align-items 屬性，若是沒有父元素，等同於 stretch。

align-self 和 align-items 相似，有六個可選項。

• auto：聽父容器的。
• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的上居中對齊。
• baseline：已第一行文字的基準對齊。
• stretch：默認，未設置高度的狀況下，佔滿整個高度。

這裏的例子中，B item 就使用 align-self 修改了對齊方式爲 center ，呈現出來的效果，就是一個對父容器，在交叉軸上居中的效果，本身管理本身。

5、小結

到這裏，關於小程序中 Flex 佈局的使用，基本上就算是講清楚了。雖然前端佈局有不少奇淫技巧，可是利用這兩篇文章中介紹的屬性，已經能夠排列出精美的 UI 效果。

快來開始你的小程序開發之旅吧！

---

公衆號後臺回覆成長『成長』，將會獲得我準備的學習資料，也能回覆『加羣』，一塊兒學習進步；你還能回覆『提問』，向我發起提問。

推薦閱讀：

• 小程序 UI 佈局指南（一）
• 程序員的密碼管理之道
• 手動刷新 MediaStore，保存的圖片當即出如今相冊中
• 僞代碼、幽默和 Google 的藝術！
• 漫畫：App 防止 Fiddler 抓包小技巧！