一、序
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:wra
p 中,可以看出 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 效果。
快來開始你的小程式開發之旅吧!
公眾號後臺回覆成長『成長』,將會得到我準備的學習資料,也能回覆『加群』,一起學習進步;你還能回覆『提問』,向我發起提問。
推薦閱讀: