Flex布局在小(xiǎo)程序的(de)使用(yòng)

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

發布人(rén)：葵宇科(kē)技(jì)

浏覽次數(shù)：76

Flex布局是(shì)一(yī)種十分(fēn)靈活方便的(de)布局方式，目前€©±>主流的(de)現(xiàn)代浏覽器(qì)基本都(dōu)實現(xiàn)了(le)對(duì)Flex布局 &的(de)完全支持。而在微(wēi)信小(xiǎo)程序中，IOS端使用(yλ òng)的(de)渲染引擎WKWebView和(hé)安卓端使用(yòng)的(d$₩©♣e)X5 ，也(yě)都(dōu)實現(xiàn)了(le)對(duì →€)Flex的(de)支持。所以為(wèi)了(le)在小(xiǎ£δ' o)程序開(kāi)發中更方便地(dì)布局，有(yǒu)必要(yào)來(lái)詳細了(le)<γ解下(xià)Flex布局在小(xiǎo)程序的(de)使<↑® 用(yòng)。本文(wén)将針對(duì)Flex布局的(☆de)各個(gè)屬性進行(xíng)介紹，并直接使用(yòn±‍ g)wxss來(lái)編寫例子(zǐ)，運行(xíng)環境是(shì)小(xiǎ✘♠o)程序的(de)開(kāi)發者工(gōng)具。

Flex布局的(de)基本概念

Flex布局直接應用(yòng)于一(yī)個(gè)Flex容器(qì)，布局的(de)對(β ₩βduì)象是(shì)容器(qì)中的(de)各個(gè)項目元素（“i‍§δ tem”）。項目元素布局的(de)核心概念在于兩條軸：主軸和(hé)交叉軸，通(tōng)過控制→£×(zhì)項目元素在主軸、交叉軸上(shàng)的(de)排列方式進行(xíng)布局，參見♣‍(jiàn)下(xià)圖：

這(zhè)裡(lǐ)要(yào)注意兩條軸的(de)方≈'≥£向不(bù)是(shì)固定的(de)（可(kě)以通(tōng)過flex-direction®÷來(lái)控制(zhì)）；此外(wài)一(yī)個(gè)Flex容器(qì)裡(lǐ)可✘$(kě)以再包含Flex容器(qì)，也(yě)就(jiù)是(shì)÷λ€↑能(néng)擁有(yǒu)多(duō)根主軸和(hé)™≈↔交叉軸。

Flex容器(qì)屬性

容器(qì)屬性有(yǒu)6個(gè)：

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

flex-direction

設定主軸方向：

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

flex-wrap

規定如(rú)果容器(qì)在主軸方向無法容下(xiàγ&£)所有(yǒu)項目，主軸上(shàng)的(de)項目如(rú)何換行(xíng)（&§flex-direction為(wèi)column☆↑和(hé)column-reverse時(shí)，就(jiùλ♦₽)是(shì)“換列”了(le)）：

nowrap（默認），即不(bù)作(zuò)換行(>↔xíng)，各個(gè)項目相(xiàng)接觸時(shí)會(huì)擠壓使寬度變小(xi↑₽βǎo)
wrap：換行(xíng)，正常從(cóng)上(shàng)到(dào)下(xià)
wrap-reverse：換行(xíng)，隻是(shì)各行(xíng)在交叉軸上(shε$"πàng)的(de)排列方向和(hé)wrap時(shí)相(xiàng‌✘‌)反

flex-flow

flex-direction和(hé)flex-wrap的(de)簡寫→♥ ，默認值為(wèi)“row wrap”。

justify-content

所有(yǒu)項目在主軸上(shàng)對(duì)齊方式：

none（默認）
center：在主軸上(shàng)居中
flex-start：主軸起點對(duì)齊
fex-end：主軸終點對(duì)齊
space-between：兩端對(duì)齊，項目✔→γ$間(jiān)間(jiān)隔相(xiàng)等
space-around：各項目兩側間(jiān)隔相(xiàng)等

align-items

所有(yǒu)項目在交叉軸上(shàng)對(duì)齊方式¶€：

stretch（默認），即項目取auto大(dà)小(xiǎo)時(shí)拉伸以占滿容器(≈®<qì)的(de)在交叉軸方向上(shàng)的(de)大(dà)小(xiǎo)
center：在交叉軸上(shàng)居中
flex-start：交叉軸起點對(duì)齊
flex-end：交叉軸終點對(duì)齊
baseline：各項目第一(yī)行(xíng)文(wén)字的(de↓ λα)基線對(duì)齊

align-content

定義了(le)多(duō)根主軸的(de)對(duì)齊方式，如(rú)果項目隻有(yǒu)一®>(yī)根主軸則不(bù)起作(zuò)用(yòng)，多(duō)根主軸一(yī)般會(✔∑∏huì)在主軸上(shàng)折行(xíng)時(shí)出現(xiàn)：

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

Flex項目屬性

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

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

order

定義項目排列序号；默認為(wèi)0，可(kě)為(wèi)負：

flex-basis

在Flex項目自(zì)适應放(fàng)大(dà)縮小(xi>✘ǎo)之前，項目占據的(de)主軸空(kōng)間(jiān)的(de)基值。

默認值為(wèi)auto，即項目的(de)本來(lái)大(dà)小(xiε¥←ǎo)：

flex-grow

注意該屬性指定的(de)是(shì)項目對(duì)剩餘空(kōn§αg)間(jiān)的(de)瓜分(fēn)比例，這(zhè)裡(lǐ)有(yǒu)×♠±兩個(gè)關鍵點：

該屬性是(shì)對(duì)剩餘空(kōng)間(jiān)的(de)瓜✔®∑分(fēn)，也(yě)即項目的(de)最終大(dà)小(xiǎo)是(shì)各項目的±☆>(de)flex-basis大(dà)小(xiǎo)、再加上∏≈<≤(shàng)瓜分(fēn)得(de)到(dào)的(de)大(§∞©dà)小(xiǎo)

默認為(wèi)0，即如(rú)果存在剩餘空(kōng)間(jiān)也(yě)不(bù)放♣¶×(fàng)大(dà)（grow），不(bù)可(kě)為(wèi)負：

flex-shrink:

空(kōng)間(jiān)不(bù)足時(shí)項目對(duì)縮小(xiǎo)份額的(deλ→"♦)瓜分(fēn)比例，還(hái)是(shì)有(yǒu)兩個(gè≈≈≤)關鍵點：

容器(qì)在主軸上(shàng)空(kōng)間(jiān)不(bù)足以放↔÷(fàng)下(xià)所有(yǒu)的(de)項目
空(kōng)間(jiān)不(bù)足可(kě)以讓項目縮小(xiǎo)，而該屬性就(ji₽γ♠ù)是(shì)對(duì)縮小(xiǎo)份額的(de)瓜分(fēn)，÷₩≈∑也(yě)即項目的(de)最終大(dà)小(xiǎo)是(shì)各項₽$目的(de)flex-basis大(dà)小(xiǎo♦™₹)、再減去(qù)瓜分(fēn)得(de)到(dào)的(≤↓"de)縮小(xiǎo)份額

默認為(wèi)1，即如(rú)果空(kōng)間(jiλ≤δān)不(bù)足項目将縮小(xiǎo)，不(bù)可(kě ‌&')負：

flex

flex-grow, flex-shrink 和(hé) flex-ba¶↔≈πsis的(de)簡寫。

align-self

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

默認值是(shì)auto，即繼承父元素的(de)align-items屬性，若無父元素則等同₹₽☆®于stretch；其他(tā)值效果和(hé)align-item ♦↕≥s一(yī)樣。

總結

Flex布局也(yě)叫彈性布局，個(gè)人(ré<₩<₽n)理(lǐ)解所謂“彈性”主要(yào)體(tǐ)現(≥→★xiàn)在Flex項目的(de)自(zì)伸縮上(shàng)。主軸上(shàn'$≥πg)的(de)自(zì)伸縮主要(yào)通(tōng≠λδ)過flex-grow、flex-shrink來(lái)控制(zhì)±♦✘，交叉軸上(shàng)的(de)自(zì)伸縮則體(tǐ)現(xiàn)在alig Ω∞∏n-*屬性的(de)默認值stretch上(shàng)。