一篇舊文，上手小程序時(shí)做的一些探索

Flex布局是一種十分靈活方便的布局方式，目前主流的 現代瀏覽器 基本都實(shí)現了對Flex布局的完全支持。而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的 X5 ，也都實(shí)現了對Flex的支持。所以為了在小程序開(kāi)發(fā)中更方便地布局，有必要來(lái)詳細了解下Flex布局在小程序的使用。本文將針對Flex布局的各個(gè)屬性進(jìn)行介紹，并直接使用wxss來(lái)編寫(xiě)例子，運行環(huán)境是小程序的開(kāi)發(fā)者工具。

Flex布局的基本概念

Flex布局直接應用于一個(gè)Flex容器，布局的對象是容器中的各個(gè)項目元素（“item”）。項目元素布局的核心概念在于兩條軸：主軸和交叉軸，通過(guò)控制項目元素在主軸、交叉軸上的排列方式進(jìn)行布局，參見(jiàn)下圖：

這里要注意兩條軸的方向不是固定的（可以通過(guò)flex-direction來(lái)控制）；此外一個(gè)Flex容器里可以再包含Flex容器，也就是能擁有多根主軸和交叉軸。

Flex容器屬性

容器屬性有6個(gè)：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

設定主軸方向：

  • row →（默認）
  • row-reverse ←
  • column ↓
  • column-reverse↑

flex-wrap

規定如果容器在主軸方向無(wú)法容下所有項目，主軸上的項目如何換行（flex-direction為column和column-reverse時(shí)，就是“換列”了）：

  • nowrap（默認），即不作換行，各個(gè)項目相接觸時(shí)會(huì )擠壓使寬度變小
  • wrap：換行，正常從上到下
  • wrap-reverse：換行，只是各行在交叉軸上的排列方向和wrap時(shí)相反

flex-flow

flex-direction和flex-wrap的簡(jiǎn)寫(xiě)，默認值為“row wrap”。

justify-content

所有項目在主軸上對齊方式：

  • none（默認）
  • center：在主軸上居中
  • flex-start：主軸起點(diǎn)對齊
  • fex-end：主軸終點(diǎn)對齊
  • space-between：兩端對齊，項目間間隔相等
  • space-around：各項目?jì)蓚乳g隔相等

align-items

所有項目在交叉軸上對齊方式：

  • stretch（默認），即項目取auto大小時(shí)拉伸以占滿(mǎn)容器的在交叉軸方向上的大小
  • center：在交叉軸上居中
  • flex-start：交叉軸起點(diǎn)對齊
  • flex-end： 交叉軸終點(diǎn)對齊
  • baseline：各項目先進(jìn)行文字的基線(xiàn)對齊

align-content

定義了多根主軸的對齊方式，如果項目只有一根主軸則不起作用，多根主軸一般會(huì )在主軸上折行時(shí)出現：

  • stretch（默認），即auto大小時(shí)主軸線(xiàn)上的項目會(huì )拉伸來(lái)占滿(mǎn)整個(gè)交叉軸。
  • center：在交叉軸上居中
  • flex-start：交叉軸起點(diǎn)對齊
  • flex-end： 交叉軸終點(diǎn)對齊
  • space-between：兩端對齊，項目間間隔相等
  • space-around：各項目?jì)蓚乳g隔相等

Flex項目屬性

項目屬性有6個(gè)：

  • order
  • flex-basis
  • flex-grow
  • flex-shrink
  • flex
  • align-self

order

定義項目排列序號；默認為0，可為負：

flex-basis

在Flex項目自適應放大縮小之前，項目占據的主軸空間的基值。

默認值為auto，即項目的本來(lái)大?。?/p>

flex-grow

注意該屬性指定的是項目對剩余空間的瓜分比例，這里有兩個(gè)關(guān)鍵點(diǎn)：

  • 容器在主軸上要有剩余空間
  • 該屬性是對剩余空間的瓜分，也即項目的最終大小是各項目的flex-basis大小、再加上瓜分得到的大小

默認為0，即如果存在剩余空間也不放大（grow），不可為負：

flex-shrink:

空間不足時(shí)項目對縮小份額的瓜分比例，還是有兩個(gè)關(guān)鍵點(diǎn)：

  • 容器在主軸上空間不足以放下所有的項目
  • 空間不足可以讓項目縮小，而該屬性就是對縮小份額的瓜分，也即項目的最終大小是各項目的flex-basis大小、再減去瓜分得到的縮小份額

默認為1，即如果空間不足項目將縮小，不可負：

flex

flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)。

默認值為“0 1 auto”，還有兩個(gè)值auto即“1 1 auto”、none即“0 0 auto”。

align-self

讓一個(gè)項目有與其他項目不同的交叉軸對齊方式，主要用來(lái)覆蓋align-items屬性。

默認值是auto，即繼承父元素的align-items屬性，若無(wú)父元素則等同于stretch；其他值效果和align-items一樣。

總結

Flex布局也叫彈性布局，個(gè)人理解所謂“彈性”主要體現在Flex項目的自伸縮上。主軸上的自伸縮主要通過(guò)flex-grow、flex-shrink來(lái)控制，交叉軸上的自伸縮則體現在align-*屬性的默認值stretch上。

一些注意點(diǎn)

  • 一些屬性會(huì )在對Flex項目上無(wú)效：column-*屬性、float 和 clear、vertical-align 。
  • 在Flex容器使用 float 會(huì )導致Flex布局失效。