Flex布局在(zài)小程序的(de)使用

發表時(shí)間：2022-9-6

發布人(rén)：融晨科技

浏覽次數：75

Flex布局是(shì)一種十分靈活方便的(de)布局方式，目前主流的(de)現代浏覽器基本都實現了(le／liǎo)對Flex布局的(de)完全支持。而(ér)在(zài)微信小程序中，IOS端使用的(de)渲染引擎WKWebView和(hé / huò)安卓端使用的(de)X5 ，也(yě)都實現了(le／liǎo)對Flex的(de)支持。所以(yǐ)爲(wéi / wèi)了(le／liǎo)在(zài)小程序開發中更方便地(dì / de)布局，有必要(yào / yāo)來(lái)詳細了(le／liǎo)解下Flex布局在(zài)小程序的(de)使用。本文将針對Flex布局的(de)各個(gè)屬性進行介紹，并直接使用wxss來(lái)編寫例子(zǐ)，運行環境是(shì)小程序的(de)開發者工具。

Flex布局的(de)基本概念

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

這(zhè)裏要(yào / yāo)注意兩條軸的(de)方向不(bù)是(shì)固定的(de)（可以(yǐ)通過flex-direction來(lái)控制）；此外一個(gè)Flex容器裏可以(yǐ)再包含Flex容器，也(yě)就(jiù)是(shì)能擁有多根主軸和(hé / huò)交叉軸。

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

規定如果容器在(zài)主軸方向無法容下所有項目，主軸上(shàng)的(de)項目如何換行（flex-direction爲(wéi / wèi)column和(hé / huò)column-reverse時(shí)，就(jiù)是(shì)“換列”了(le／liǎo)）：

nowrap（默認），即不(bù)作換行，各個(gè)項目相接觸時(shí)會擠壓使寬度變小
wrap：換行，正常從上(shàng)到(dào)下
wrap-reverse：換行，隻是(shì)各行在(zài)交叉軸上(shàng)的(de)排列方向和(hé / huò)wrap時(shí)相反

flex-flow

flex-direction和(hé / huò)flex-wrap的(de)簡寫，默認值爲(wéi / wèi)“row wrap”。

justify-content

所有項目在(zài)主軸上(shàng)對齊方式：

none（默認）
center：在(zài)主軸上(shàng)居中
flex-start：主軸起點對齊
fex-end：主軸終點對齊
space-between：兩端對齊，項目間間隔相等
space-around：各項目兩側間隔相等

align-items

所有項目在(zài)交叉軸上(shàng)對齊方式：

stretch（默認），即項目取auto大(dà)小時(shí)拉伸以(yǐ)占滿容器的(de)在(zài)交叉軸方向上(shàng)的(de)大(dà)小
center：在(zài)交叉軸上(shàng)居中
flex-start：交叉軸起點對齊
flex-end：交叉軸終點對齊
baseline：各項目第一行文字的(de)基線對齊

align-content

定義了(le／liǎo)多根主軸的(de)對齊方式，如果項目隻有一根主軸則不(bù)起作用，多根主軸一般會在(zài)主軸上(shàng)折行時(shí)出(chū)現：

stretch（默認），即auto大(dà)小時(shí)主軸線上(shàng)的(de)項目會拉伸來(lái)占滿整個(gè)交叉軸。
center：在(zài)交叉軸上(shàng)居中
flex-start：交叉軸起點對齊
flex-end：交叉軸終點對齊
space-between：兩端對齊，項目間間隔相等
space-around：各項目兩側間隔相等

Flex項目屬性

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

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

order

定義項目排列序号；默認爲(wéi / wèi)0，可爲(wéi / wèi)負：

flex-basis

在(zài)Flex項目自适應放大(dà)縮小之(zhī)前，項目占據的(de)主軸空間的(de)基值。

默認值爲(wéi / wèi)auto，即項目的(de)本來(lái)大(dà)小：

flex-grow

注意該屬性指定的(de)是(shì)項目對剩餘空間的(de)瓜分比例，這(zhè)裏有兩個(gè)關鍵點：

容器在(zài)主軸上(shàng)要(yào / yāo)有剩餘空間
該屬性是(shì)對剩餘空間的(de)瓜分，也(yě)即項目的(de)最終大(dà)小是(shì)各項目的(de)flex-basis大(dà)小、再加上(shàng)瓜分得到(dào)的(de)大(dà)小

默認爲(wéi / wèi)0，即如果存在(zài)剩餘空間也(yě)不(bù)放大(dà)（grow），不(bù)可爲(wéi / wèi)負：

flex-shrink:

空間不(bù)足時(shí)項目對縮小份額的(de)瓜分比例，還是(shì)有兩個(gè)關鍵點：

容器在(zài)主軸上(shàng)空間不(bù)足以(yǐ)放下所有的(de)項目
空間不(bù)足可以(yǐ)讓項目縮小，而(ér)該屬性就(jiù)是(shì)對縮小份額的(de)瓜分，也(yě)即項目的(de)最終大(dà)小是(shì)各項目的(de)flex-basis大(dà)小、再減去瓜分得到(dào)的(de)縮小份額

默認爲(wéi / wèi)1，即如果空間不(bù)足項目将縮小，不(bù)可負：

flex

flex-grow, flex-shrink 和(hé / huò) flex-basis的(de)簡寫。

默認值爲(wéi / wèi)“0 1 auto”，還有兩個(gè)值auto即“1 1 auto”、none即“0 0 auto”。

align-self

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

默認值是(shì)auto，即繼承父元素的(de)align-items屬性，若無父元素則等同于(yú)stretch；其他(tā)值效果和(hé / huò)align-items一樣。

總結

Flex布局也(yě)叫彈性布局，個(gè)人(rén)理解所謂“彈性”主要(yào / yāo)體現在(zài)Flex項目的(de)自伸縮上(shàng)。主軸上(shàng)的(de)自伸縮主要(yào / yāo)通過flex-grow、flex-shrink來(lái)控制，交叉軸上(shàng)的(de)自伸縮則體現在(zài)align-*屬性的(de)默認值stretch上(shàng)。