標籤:部分 些許 用處 flow enter 一點 idt 作用 開發架構
一、序
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 效果。
快來開始你的小程式開發之旅吧!
公眾號後台回複成長『成長』,將會得到我準備的學習資料,也能回複『加群』,一起學習進步;你還能回複『提問』,向我發起提問。
推薦閱讀:
- 小程式 UI 布局指南(一)
- 程式員的密碼管理之道
- 手動重新整理 MediaStore,儲存的圖片立即出現在相簿中
- 虛擬碼、幽默和 Google 的藝術!
- 漫畫:App 防止 Fiddler 抓包小技巧!
寫給 Android 開發的小程式布局指南,Flex 布局!