[[232231]]

 一、序

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

最近在做小程序，驗(yàn)證一些方向，開發(fā)效率確實(shí)很快，就是各種微信的審核有點(diǎn)費(fèi)勁，但是總歸是有辦法解決的。

想要開發(fā)一款小程序，其實(shí)和我們正常寫一款 App 類似，你需要有精美的前端布局，并且同時(shí)還需要處理和前端 UI 組件的交互以及它們背后的邏輯。

最近會(huì)分享一些關(guān)于小程序的內(nèi)容（不保證，想到哪里寫到哪里），今天先說說接觸小程序***步：布局。

如果有前端經(jīng)驗(yàn)的話，小程序是非常容易上手的，而對(duì)于新手，***步當(dāng)然是閱讀小程序的官方文檔，不過之后你馬上就要面臨布局的問題。

在小程序的開發(fā)框架中，會(huì)使用 Flex 排版布局，它可以幫助我們快速的在小程序中進(jìn)行 UI 布局。雖說 Flex 現(xiàn)在已經(jīng)被主流瀏覽器所支持，但是 flex 在一些低版本的瀏覽器上還有些許兼容的問題。不過在小程序中，這就不是我們需要考慮的了，微信已經(jīng)幫我們處理好了。

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

二、什么是 Flex

Flex 是 2009 年，W3C 提出的一種新的布局適配方案，通過 Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式的實(shí)現(xiàn)各種頁(yè)面布局。經(jīng)過這些年的發(fā)展，已經(jīng)得到了所有瀏覽器的支持，基本上可以讓我們放心使用。

Flex 布局是 Flexible Box 的縮寫，直譯過來就是 "彈性盒子"，它也是基于 "盒子" 模型，將 UI 切割成一個(gè)一個(gè)小的盒子，來進(jìn)行 UI 布局。

如果你不是在開發(fā)小程序，而是想單純的開發(fā)移動(dòng)前端，你也可以使用 Flex 布局。雖然 Flex 已經(jīng)被所有瀏覽器支持，但是架不住有一些老舊的瀏覽器，例如：IE 9，也是存在不支持的情況的。不過我們只是開發(fā)小程序，就完全不用擔(dān)心這一點(diǎn)。

三、Flex 如何使用

3.1 概述

Flex 的使用非常的簡(jiǎn)單，你只需要將 display 設(shè)置為 flex 就可以了。

display 除了 flex 還有一些其他可選參數(shù)，具體的你可以參見文檔。

而在新手階段，暫時(shí)只需要關(guān)注兩個(gè)參數(shù)：

block ：指定一個(gè)塊級(jí)布局，它其內(nèi)的元素，總是起一個(gè)新行來顯示，而微信小程序的很多視圖容器組件，默認(rèn)的 displa 就是 block，例如：view、scroll-view、swiper 等。

flex：指定為 Flex 布局，它可以在盒子內(nèi)顯示子元素。

舉個(gè)例子，看一下效果圖：

display-flex

在這里，當(dāng)不做特殊設(shè)置的時(shí)候，默認(rèn)為 display:block 的狀態(tài)，其內(nèi)的每一個(gè)元素，都另起一行去展示。 display:flex 的話，我們就可以自由設(shè)置其內(nèi)元素的布局形式，這里只是顯示了 flex 默認(rèn)的效果，實(shí)際上我們還可以通過 Flex 提供的不同的屬性，進(jìn)行更靈活的布局。

3.2 Flex 的方向軸

想要掌握 Flex 布局，你的心中時(shí)刻都需要有一個(gè)方向軸的概念。

在 Flex 布局中，天然存在兩根方向軸：主軸和交叉軸。交叉軸在有些地方又被稱為側(cè)軸，其實(shí)是一個(gè)概念。

在默認(rèn)情況下，主軸是沿著水平方向延伸，而交叉軸則正好與主軸呈交叉狀態(tài)。

但是這并非不可改變，我們可以通過 flex-direction 屬性，來改變主軸的方向，交叉軸的方向是相對(duì)于主軸存在的，當(dāng)我們改變主軸方向后，交叉軸也被同時(shí)改變。

flex-cross

既然 Flex 布局也是通過一些屬性來控制效果的，和我們正常寫一個(gè)移動(dòng) App 是一樣的，有一些屬性是作用在父容器中的，有一些是作用在其內(nèi)的子元素上的。

接下來我們就來分開講解，這些 Flex 布局的時(shí)候，你需要使用到的屬性。

3.3 Flex 在父容器上的屬性

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

flex-direction：指定主軸的方向。

flex-wrap：指定超出父容器的時(shí)候，子元素的排列樣式。

flex-flow：flex-direaction 和 flex-wrap 兩個(gè)屬性的組合簡(jiǎn)寫形式。

justify-content：子元素在主軸的排列方向。

align-items：子元素在交叉軸上的排列方向。

align-content：多根軸線的對(duì)其方式。

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

1) flex-direction

前面也提到，flex 布局有兩條軸，它們是交叉相對(duì)的，分為主軸和交叉軸。我們可以通過 flex-direction 來確定主軸的方向，同時(shí)交叉軸的方向也被確定了。

在 flex 布局中，除了橫豎兩個(gè)軸之外，軸還有起始點(diǎn)（start）和結(jié)束點(diǎn)（end）的概念，加載一起 flex-direction 有四個(gè)屬性。

row：默認(rèn)值，主軸水平方向，起始點(diǎn)在左邊。

row-reverse：主軸水平方向，起始點(diǎn)在右邊。

column：主軸垂直方向，起始點(diǎn)在上邊。

column-reverse：主軸垂直方向，起始點(diǎn)在下邊。

這個(gè)雖然非常好理解，但是我們依然在小程序中看看效果。

flex-direction

2）flex-wrap

flex-wrap 屬性用來確定，父容器內(nèi)，當(dāng)單行已經(jīng)無法包容所有子元素之后，如何換行。

nowrap：不換行，此為默認(rèn)值。

wrap：超出單行的時(shí)候，自然換行。

wrap-reverse：超出單行的時(shí)候，沿著底部翻轉(zhuǎn)方向，自然換行。

css 里就是有很多屬性是帶有 xxx-reverse 參數(shù)的，大多數(shù)情況下我們也用不上，不過還是了解一下沒壞處。

雖然圖片已經(jīng)很清晰了，從 flex-wrap:wrap 中，可以看出 A、B、C 三個(gè)元素，實(shí)際上寬度是不一致的。

一般在單純的介紹 flex-wrap:wrap 屬性的文章，其實(shí)是會(huì)說將多余的部分切割在父布局之外。

我也盜個(gè)圖，看看別人教程里顯示的效果。

實(shí)際上如果你在純前端的環(huán)境中，使用 flex-wrap:wrap 也確實(shí)是這個(gè)效果，所以這并不是錯(cuò)誤，我理解這就是表現(xiàn)的差異。

但是在小程序中的表現(xiàn)并不是這樣的，它最終會(huì)根據(jù)你設(shè)置的子元素的寬度，橫向的等比進(jìn)行縮放，讓它可以在當(dāng)行內(nèi)顯示的下。

在這個(gè)例子中，C 塊是寬度最寬的一個(gè)布局，當(dāng)我們?cè)黾?C 塊的時(shí)候，看看這樣極端情況下，flex-wrap:nowrap 在小程序中的表現(xiàn)。

可以看到，它會(huì)等比例壓縮其內(nèi)所有布局的寬度，這是一點(diǎn)差異，需要特別注意。

3）flex-flow

flex-flow 是前面兩個(gè)屬性 flex-direction 和 flex-wrap 的簡(jiǎn)寫組合。

在 css 中，很多屬性都是一些屬性的組合，是存在這種寫法的，中間使用空格分割就可以了。

例如：

.ele { 
  flex-flow: row nowrap; 
} 

這樣就可以一次對(duì)兩個(gè)屬性進(jìn)行設(shè)置，并不沖突。

4）justify-content

justify-content 可以用來設(shè)置子元素，在主軸方向上的對(duì)其方式。

它有五個(gè)可選項(xiàng)：

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

justify-content 基本上看描述就知道效果了，不過 space-between 和 space-around 看似很像，但是實(shí)際上也是有差異的，我們看看最終運(yùn)行的效果是最清晰的。

justify-content

可以看到 space-around 是會(huì)保留左右的邊距，感覺就像是為每個(gè)元素都增加了一個(gè)左右的 margin 屬性，而 space-between 則只在子元素之間存在距離。

5）align-items

align-items 屬性，可以定義在交叉軸上，子元素的對(duì)其方式。

它也存在五個(gè)選擇參數(shù)：

flex-start：交叉軸的起點(diǎn)對(duì)齊。

flex-end：交叉軸的終點(diǎn)對(duì)齊。

center：交叉軸方向居中。

baseline：子元素的***個(gè)元素，內(nèi)容基線對(duì)齊。

stretch：默認(rèn)參數(shù)，會(huì)在交叉軸上鋪滿父布局。

注意 align-items:stretch 和前面我們的屬性描述是不符合的，主要原因是它有兩個(gè)限制。

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

例如前面的代碼，我們根據(jù)這里的兩個(gè)限制進(jìn)行修改。

align-items 還有一點(diǎn)需要注意的參數(shù)是 baseline，它是根據(jù)主軸方向，***個(gè)元素的內(nèi)容為基準(zhǔn)進(jìn)行對(duì)齊，我們把 A 塊，增加一個(gè) margin-top 再來看看效果。

可以看到，其他屬性均有影響，但是 baseline 的時(shí)候，依然可以保持子元素基于內(nèi)容對(duì)齊。

6）align-content

align-content 屬性指定交叉軸上，元素的對(duì)其方式，和 align-items 有點(diǎn)類似。一般移動(dòng)端的 UI 布局，都是傾向于列表形式***向下延伸，所以 align-content 的用處其實(shí)不大。

但是當(dāng)你需要做一個(gè)單頁(yè)效果，例如活動(dòng)圖，就可以利用上 align-content 屬性了。

align-content 有六個(gè)可選的屬性：

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

其實(shí)我們理解了 align-items ，對(duì)于 align-content 就非常好理解了。

沒什么好多說的，直接上一個(gè)效果圖看看。

四、小結(jié)

本文介紹的都是 Flex 在父容器上的屬性，其實(shí)它還有一些在子元素上的數(shù)據(jù)。但是我決定放在下一篇文章里再詳細(xì)講。

而大多數(shù)情況下，我們僅僅依賴 Flex 的父容器上的這幾個(gè)屬性，就可以完成一些不錯(cuò)的 UI 布局。

【本文為51CTO專欄作者“張旸”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過微信公眾號(hào)聯(lián)系作者獲取授權(quán)】

戳這里，看該作者更多好文