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

一、序

Hi，大家好，我是承香墨影！

最近在做小程式，驗證一些方向，開發效率確實很快，就是各種微信的稽核有點費勁，但是總歸是有辦法解決的。

想要開發一款小程式，其實和我們正常寫一款 App 類似，你需要有精美的前端佈局，並且同時還需要處理和前端 UI 元件的互動以及它們背後的邏輯。

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

如果有前端經驗的話，小程式是非常容易上手的，而對於新手，第一步當然是閱讀小程式的官方文件，不過之後你馬上就要面臨佈局的問題。

在小程式的開發框架中，會使用 Flex 排版佈局，它可以幫助我們快速的在小程式中進行 UI 佈局。雖說 Flex 現在已經被主流瀏覽器所支援，但是 flex 在一些低版本的瀏覽器上還有些許相容的問題。不過在小程式中，這就不是我們需要考慮的了，微信已經幫我們處理好了。

接下來我就以完整的小程式來做示例，說說 flex 佈局的那些事情。話不多說，言歸正傳。

二、什麼是 Flex

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

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

如果你不是在開發小程式，而是想單純的開發移動前端，你也可以使用 Flex 佈局。雖然 Flex 已經被所有瀏覽器支援，但是架不住有一些老舊的瀏覽器，例如：IE 9，也是存在不支援的情況的。不過我們只是開發小程式，就完全不用擔心這一點。

三、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 就非常好理解了。

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

四、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 分別設定為 1、2、3，並且每個子元素的寬度，設定為 5 rpx。

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

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

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

此屬性想要生效，flex-wrap 必須設定為 nowrap，意思是不允許換行，所有和比例相關的屬性，都需要 nowrap 加持。

希望大家熟悉這樣的舉例方式，後面的例子，均會以這樣的形式表示引數的設定。

width，為子元素的寬度。

屬性：1、2、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 ，呈現出來的效果，就是一個對父容器，在交叉軸上居中的效果，自己管理自己。

五、小結

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

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

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