Flex佈局在小程序的使用

一篇舊文，上手小程序時作的一些探索

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佈局失效。

參考

Flex 佈局教程