Flex布局是一種十分靈活方便的布局方式,目前主流的現(xiàn)代瀏覽器基本都實現(xiàn)了對Flex布局的完全支持。而在微信小程序中,IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ,也都實現(xiàn)了對Flex的支持。所以為了在小程序開發(fā)中更方便地布局,有必要來詳細了解下Flex布局在小程序的使用。本文將針對Flex布局的各個屬性進行介紹,并直接使用wxss來編寫例子,運行環(huán)境是小程序的開發(fā)者工具。 Flex布局的基本概念Flex布局直接應(yīng)用于一個Flex容器,布局的對象是容器中的各個項目元素(“item”)。項目元素布局的核心概念在于兩條軸:主軸和交叉軸,通過控制項目元素在主軸、交叉軸上的排列方式進行布局,參見下圖: 這里要注意兩條軸的方向不是固定的(可以通過flex-direction來控制);此外一個Flex容器里可以再包含F(xiàn)lex容器,也就是能擁有多根主軸和交叉軸。 Flex容器屬性容器屬性有6個:
flex-direction設(shè)定主軸方向:
flex-wrap規(guī)定如果容器在主軸方向無法容下所有項目,主軸上的項目如何換行(flex-direction為column和column-reverse時,就是“換列”了):
flex-flowflex-direction和flex-wrap的簡寫,默認值為“row wrap”。 justify-content所有項目在主軸上對齊方式:
align-items所有項目在交叉軸上對齊方式:
align-content定義了多根主軸的對齊方式,如果項目只有一根主軸則不起作用,多根主軸一般會在主軸上折行時出現(xiàn):
Flex項目屬性項目屬性有6個:
order定義項目排列序號;默認為0,可為負: flex-basis在Flex項目自適應(yīng)放大縮小之前,項目占據(jù)的主軸空間的基值。 默認值為auto,即項目的本來大?。?/p> flex-grow注意該屬性指定的是項目對剩余空間的瓜分比例,這里有兩個關(guān)鍵點:
默認為0,即如果存在剩余空間也不放大(grow),不可為負: flex-shrink:空間不足時項目對縮小份額的瓜分比例,還是有兩個關(guān)鍵點:
默認為1,即如果空間不足項目將縮小,不可負: flexflex-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一樣。 總結(jié)Flex布局也叫彈性布局,個人理解所謂“彈性”主要體現(xiàn)在Flex項目的自伸縮上。主軸上的自伸縮主要通過flex-grow、flex-shrink來控制,交叉軸上的自伸縮則體現(xiàn)在align-*屬性的默認值stretch上。 一些注意點
參考Flex 布局教程 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)