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