您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
Flex布局在小程序的使用
發表時間:2022-9-6
發布人:葵宇科技
浏覽次數:39
Flex布局是一種十分靈活方便的布局方式,目前主流的現代浏覽器(qì)基本都實現了對Flex布局的完全支持。而在微信小程序中(zhōng),IOS端使用的渲染引擎WKWebView和(hé)安卓端使用的X5 ,也都實現了對Flex的支持。所以為了在小程序開發中(zhōng)更方便地布局,有必要來詳細了解下(xià)Flex布局在小程序的使用。本文(wén)将針對Flex布局的各個(gè)屬性進行介紹,并直接使用wxss來編寫例子(zǐ),運行環境是小程序的開發者工具。
Flex布局的基本概念
Flex布局直接應用于一個(gè)Flex容器(qì),布局的對象是容器(qì)中(zhōng)的各個(gè)項目元素(“item”)。項目元素布局的核心概念在于兩條軸:主軸和(hé)交叉軸,通(tōng)過控制項目元素在主軸、交叉軸上的排列方式進行布局,參見下(xià)圖:
這裡要注意兩條軸的方向不是固定的(可(kě)以通(tōng)過flex-direction來控制);此外一個(gè)Flex容器(qì)裡可(kě)以再包含Flex容器(qì),也就是能擁有多根主軸和(hé)交叉軸。
Flex容器(qì)屬性
容器(qì)屬性有6個(gè):
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
設定主軸方向:
- row →(默認)
- row-reverse ←
- column ↓
- column-reverse↑
flex-wrap
規定如(rú)果容器(qì)在主軸方向無法容下(xià)所有項目,主軸上的項目如(rú)何換行(flex-direction為column和(hé)column-reverse時,就是“換列”了):
- nowrap(默認),即不作換行,各個(gè)項目相接觸時會擠壓使寬度變小
- wrap:換行,正常從上到下(xià)
- wrap-reverse:換行,隻是各行在交叉軸上的排列方向和(hé)wrap時相反
flex-flow
flex-direction和(hé)flex-wrap的簡寫,默認值為“row wrap”。
justify-content
所有項目在主軸上對齊方式:
- none(默認)
- center:在主軸上居中(zhōng)
- flex-start:主軸起點對齊
- fex-end:主軸終點對齊
- space-between:兩端對齊,項目間間隔相等
- space-around:各項目兩側間隔相等
align-items
所有項目在交叉軸上對齊方式:
- stretch(默認),即項目取auto大小時拉伸以占滿容器(qì)的在交叉軸方向上的大小
- center:在交叉軸上居中(zhōng)
- flex-start:交叉軸起點對齊
- flex-end: 交叉軸終點對齊
- baseline:各項目第一行文(wén)字的基線對齊
align-content
定義了多根主軸的對齊方式,如(rú)果項目隻有一根主軸則不起作用,多根主軸一般會在主軸上折行時出現:
- stretch(默認),即auto大小時主軸線上的項目會拉伸來占滿整個(gè)交叉軸。
- center:在交叉軸上居中(zhōng)
- flex-start:交叉軸起點對齊
- flex-end: 交叉軸終點對齊
- space-between:兩端對齊,項目間間隔相等
- space-around:各項目兩側間隔相等
Flex項目屬性
項目屬性有6個(gè):
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
- align-self
order
定義項目排列序号;默認為0,可(kě)為負:
flex-basis
在Flex項目自适應放大縮小之前,項目占據的主軸空間的基值。
默認值為auto,即項目的本來大小:
flex-grow
注意該屬性指定的是項目對剩餘空間的瓜分比例,這裡有兩個(gè)關(guān)鍵點:
- 容器(qì)在主軸上要有剩餘空間
- 該屬性是對剩餘空間的瓜分,也即項目的最終大小是各項目的flex-basis大小、再加上瓜分得到的大小
默認為0,即如(rú)果存在剩餘空間也不放大(grow),不可(kě)為負:
flex-shrink:
空間不足時項目對縮小份額的瓜分比例,還是有兩個(gè)關(guān)鍵點:
- 容器(qì)在主軸上空間不足以放下(xià)所有的項目
- 空間不足可(kě)以讓項目縮小,而該屬性就是對縮小份額的瓜分,也即項目的最終大小是各項目的flex-basis大小、再減去瓜分得到的縮小份額
默認為1,即如(rú)果空間不足項目将縮小,不可(kě)負:
flex
flex-grow, flex-shrink 和(hé) flex-basis的簡寫。
默認值為“0 1 auto”,還有兩個(gè)值auto即“1 1 auto”、none即“0 0 auto”。
align-self
讓一個(gè)項目有與其他項目不同的交叉軸對齊方式,主要用來覆蓋align-items屬性。
默認值是auto,即繼承父元素的align-items屬性,若無父元素則等同于stretch;其他值效果和(hé)align-items一樣。
總結
Flex布局也叫彈性布局,個(gè)人理解所謂“彈性”主要體現在Flex項目的自伸縮上。主軸上的自伸縮主要通(tōng)過flex-grow、flex-shrink來控制,交叉軸上的自伸縮則體現在align-*屬性的默認值stretch上。
一些注意點
- 一些屬性會在對Flex項目上無效:column-*屬性、float 和(hé) clear、vertical-align 。
- 在Flex容器(qì)使用 float 會導緻Flex布局失效。
參考
Flex 布局教程