一篇舊文,上手小程式時做的一些探索
Flex佈局是一種十分靈活方便的佈局方式,目前主流的現代瀏覽器基本都實現了對Flex佈局的完全支援。而在微信小程式中,IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ,也都實現了對Flex的支援。所以為了在小程式開發中更方便地佈局,有必要來詳細瞭解下Flex佈局在小程式的使用。本文將針對Flex佈局的各個屬性進行介紹,並直接使用wxss來編寫例子,執行環境是小程式的開發者工具。
Flex佈局的基本概念
Flex佈局直接應用於一個Flex容器,佈局的物件是容器中的各個專案元素(“item”)。專案元素佈局的核心概念在於兩條軸:主軸和交叉軸,通過控制專案元素在主軸、交叉軸上的排列方式進行佈局,參見下圖:

這裡要注意兩條軸的方向不是固定的(可以通過flex-direction來控制);此外一個Flex容器裡可以再包含Flex容器,也就是能擁有多根主軸和交叉軸。
Flex容器屬性
容器屬性有6個:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
設定主軸方向:
- row →(預設)
- row-reverse ←
- column ↓
- column-reverse↑

flex-wrap
規定如果容器在主軸方向無法容下所有專案,主軸上的專案如何換行(flex-direction為column和column-reverse時,就是“換列”了):
- nowrap(預設),即不作換行,各個專案相接觸時會擠壓使寬度變小
- wrap:換行,正常從上到下
- wrap-reverse:換行,只是各行在交叉軸上的排列方向和wrap時相反

flex-flow
flex-direction和flex-wrap的簡寫,預設值為“row wrap”。
justify-content
所有專案在主軸上對齊方式:
- none(預設)
- center:在主軸上居中
- flex-start:主軸起點對齊
- fex-end:主軸終點對齊
- space-between:兩端對齊,專案間間隔相等
- space-around:各專案兩側間隔相等

align-items
所有專案在交叉軸上對齊方式:
- stretch(預設),即專案取auto大小時拉伸以佔滿容器的在交叉軸方向上的大小
- center:在交叉軸上居中
- flex-start:交叉軸起點對齊
- flex-end: 交叉軸終點對齊
- baseline:各專案第一行文字的基線對齊


align-content
定義了多根主軸的對齊方式,如果專案只有一根主軸則不起作用,多根主軸一般會在主軸上折行時出現:
- stretch(預設),即auto大小時主軸線上的專案會拉伸來佔滿整個交叉軸。
- center:在交叉軸上居中
- flex-start:交叉軸起點對齊
- flex-end: 交叉軸終點對齊
- space-between:兩端對齊,專案間間隔相等
- space-around:各專案兩側間隔相等


Flex專案屬性
專案屬性有6個:
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
- align-self
order
定義專案排列序號;預設為0,可為負:

flex-basis
在Flex專案自適應放大縮小之前,專案佔據的主軸空間的基值。
預設值為auto,即專案的本來大小:

flex-grow
注意該屬性指定的是專案對剩餘空間的瓜分比例,這裡有兩個關鍵點:
- 容器在主軸上要有剩餘空間
- 該屬性是對剩餘空間的瓜分,也即專案的最終大小是各專案的flex-basis大小、再加上瓜分得到的大小
預設為0,即如果存在剩餘空間也不放大(grow),不可為負:

flex-shrink:
空間不足時專案對縮小份額的瓜分比例,還是有兩個關鍵點:
- 容器在主軸上空間不足以放下所有的專案
- 空間不足可以讓專案縮小,而該屬性就是對縮小份額的瓜分,也即專案的最終大小是各專案的flex-basis大小、再減去瓜分得到的縮小份額
預設為1,即如果空間不足專案將縮小,不可負:

flex
flex-grow, flex-shrink 和 flex-basis的簡寫。
預設值為“0 1 auto”,還有兩個值auto即“1 1 auto”、none即“0 0 auto”。
align-self
讓一個專案有與其他專案不同的交叉軸對齊方式,主要用來覆蓋align-items屬性。
預設值是auto,即繼承父元素的align-items屬性,若無父元素則等同於stretch;其他值效果和align-items一樣。

總結
Flex佈局也叫彈性佈局,個人理解所謂“彈性”主要體現在Flex專案的自伸縮上。主軸上的自伸縮主要通過flex-grow、flex-shrink來控制,交叉軸上的自伸縮則體現在align-*屬性的預設值stretch上。
一些注意點
- 一些屬性會在對Flex專案上無效:column-*屬性、float 和 clear、vertical-align 。
- 在Flex容器使用 float 會導致Flex佈局失效。