3.3 flex布局

3.3.1 基本概念

1 flex模型

小程序使用flex模型提高頁(yè)面布局的效率。這是一種靈活的布局模型，當(dāng)頁(yè)面需要適應(yīng)不同屏幕尺寸及設(shè)備類型時(shí)該模型可以確保元素在恰當(dāng)?shù)奈恢谩?/p>

2 容器和項(xiàng)目

在flex布局中，用于包含內(nèi)容的組件稱為容器（container），容器內(nèi)部的組件稱為項(xiàng)目（item）。容器允許包含嵌套，例如：

在上述代碼中共有3個(gè)<view>組件，對(duì)于A、B來(lái)說(shuō)，A是容器，B是項(xiàng)目；對(duì)于B、C來(lái)說(shuō)，B是容器，C是項(xiàng)目。

3 坐標(biāo)軸

flex布局的坐標(biāo)系是以容器左上角的點(diǎn)為原點(diǎn)，自原點(diǎn)往右、往下兩條坐標(biāo)軸。在默認(rèn)情況下是水平布局，即水平方向從左往右為主軸（main axis），垂直方向自上而下為交叉軸（cross axis），如圖3-7（a）所示。用戶也可以使用樣式屬性flex-direction: column將主軸與交叉軸的位置互換，如圖3-7（b）所示。

圖3-7 坐標(biāo)軸對(duì)照?qǐng)D

4 flex屬性

在小程序中，與flex布局模型相關(guān)的樣式屬性根據(jù)其所屬標(biāo)簽的類型可以分為容器屬性和項(xiàng)目屬性。

容器屬性用于規(guī)定容器的布局方式，從而控制內(nèi)部項(xiàng)目的排列和對(duì)齊，如表3-22所示。

表3-22 flex布局中的容器屬性

項(xiàng)目屬性用于設(shè)置容器內(nèi)部項(xiàng)目的尺寸、位置以及對(duì)齊方式，如表3-23所示。

表3-23 flex布局中的項(xiàng)目屬性

例如，無(wú)法確定容器組件的寬／高卻需要內(nèi)部項(xiàng)目垂直居中，WXSS代碼如下：

后續(xù)章節(jié)將詳細(xì)講解這些屬性的作用。

3.3.2 容器屬性

1 flex-direction屬性

flex-direction屬性用于設(shè)置主軸方向，通過(guò)設(shè)置坐標(biāo)軸可以規(guī)定項(xiàng)目的排列方向。

其語(yǔ)法格式如下：

對(duì)屬性值說(shuō)明如下。

?　row：默認(rèn)值，主軸在水平方向上從左到右，項(xiàng)目按照主軸方向從左到右排列。

?　row-reverse：主軸是row的反方向，項(xiàng)目按照主軸方向從右到左排列。

?　column：主軸在垂直方向上從上而下，項(xiàng)目按照主軸方向從上往下排列。

?　column-reverse：主軸是column的反方向，項(xiàng)目按照主軸方向從下往上排列。

假設(shè)有項(xiàng)目A、B、C 3個(gè)組件，高、寬均相同，flex-direction取不同值時(shí)的效果如圖3-8所示。

視頻講解

圖3-8 flex-direction屬性值對(duì)照?qǐng)D

2 flex-wrap屬性

flex-wrap屬性用于規(guī)定是否允許項(xiàng)目換行，以及多行排列時(shí)換行的方向。

其語(yǔ)法格式如下：

對(duì)屬性值說(shuō)明如下。

?　nowrap：默認(rèn)值，表示不換行。如果單行內(nèi)容過(guò)多，項(xiàng)目寬度可能會(huì)被壓縮。

?　wrap：當(dāng)容器單行容不下所有項(xiàng)目時(shí)允許換行排列。

?　wrap-reverse：當(dāng)容器單行容不下所有項(xiàng)目時(shí)允許換行排列，換行方向?yàn)閣rap的反方向。

這里以水平方向?yàn)槔僭O(shè)有項(xiàng)目A、B、C、D 4個(gè)組件，寬、高均相同，flex-wrap取不同值時(shí)的效果如圖3-9所示。

視頻講解

圖3-9 flex-wrap屬性值對(duì)照?qǐng)D

3 justify-content屬性

justify-content屬性用于設(shè)置項(xiàng)目在主軸方向上的對(duì)齊方式，以及分配項(xiàng)目之間及其周圍多余的空間。

其語(yǔ)法格式如下：

對(duì)屬性值說(shuō)明如下。

?　flex-start：默認(rèn)值，表示項(xiàng)目對(duì)齊主軸起點(diǎn)，項(xiàng)目間不留空隙。

?　center：項(xiàng)目在主軸上居中排列，項(xiàng)目間不留空隙。主軸上第一個(gè)項(xiàng)目離主軸起點(diǎn)的距離等于最后一個(gè)項(xiàng)目離主軸終點(diǎn)的距離。

?　flex-end：項(xiàng)目對(duì)齊主軸終點(diǎn)，項(xiàng)目間不留空隙。

?　space-between：項(xiàng)目間距相等，第一個(gè)和最后一個(gè)項(xiàng)目分別離起點(diǎn)／終點(diǎn)的距離為0。

?　space-around：與space-between相似，不同之處為第一個(gè)項(xiàng)目離主軸起點(diǎn)和最后一個(gè)項(xiàng)目離終點(diǎn)的距離為中間項(xiàng)目間間距的一半。

?　space-evenly：項(xiàng)目間距、第一個(gè)項(xiàng)目離主軸起點(diǎn)以及最后一個(gè)項(xiàng)目離終點(diǎn)的距離均相等。

這里以水平方向作為主軸為例，假設(shè)有項(xiàng)目A、B、C幾個(gè)組件，寬、高完全相同，justify-content取不同值時(shí)的效果如圖3-10所示。

視頻講解

圖3-10 justify-content屬性值對(duì)照?qǐng)D

4 align-items屬性

align-items屬性用于設(shè)置項(xiàng)目在行中的對(duì)齊方式。

其語(yǔ)法格式如下：

對(duì)屬性值說(shuō)明如下。

?　stretch（默認(rèn)值）：未設(shè)置項(xiàng)目尺寸時(shí)將項(xiàng)目拉伸至填滿交叉軸。

?　flex-start：項(xiàng)目頂部與交叉軸起點(diǎn)對(duì)齊。

?　center：項(xiàng)目在交叉軸居中對(duì)齊。

?　flex-end：項(xiàng)目底部與交叉軸終點(diǎn)對(duì)齊。

?　baseline：項(xiàng)目與行的基線對(duì)齊，在未單獨(dú)設(shè)置基線時(shí)等同于flex-start。

這里以垂直方向作為主軸為例，假設(shè)有項(xiàng)目A、B、C 3個(gè)組件，寬度分別為200rpx、300rpx、400rpx（取值為stretch時(shí)暫不設(shè)置），align-items取不同值時(shí)的效果如圖3-11所示。

視頻講解

圖3-11 align-items屬性值對(duì)照?qǐng)D

5 align-content屬性

align-content屬性用于多行排列時(shí)設(shè)置項(xiàng)目在交叉軸方向上的對(duì)齊方式，以及分配項(xiàng)目之間及其周圍多余的空間。

其語(yǔ)法格式如下：

對(duì)屬性值說(shuō)明如下。

?　stretch：默認(rèn)值，未設(shè)置項(xiàng)目尺寸時(shí)將各行中的項(xiàng)目拉伸至填滿交叉軸。當(dāng)設(shè)置了項(xiàng)目尺寸時(shí)項(xiàng)目尺寸不變，項(xiàng)目行拉伸至填滿交叉軸。

?　flex-start：首行在交叉軸起點(diǎn)開(kāi)始排列，行間不留間距。

?　center：行在交叉軸中點(diǎn)排列，行間不留間距，首行離交叉軸起點(diǎn)和尾行離交叉軸終點(diǎn)的距離相等。

?　flex-end：尾行在交叉軸終點(diǎn)開(kāi)始排列，行間不留間距。

?　space-between：行與行間距相等，首行離交叉軸起點(diǎn)和尾行離交叉軸終點(diǎn)的距離為0。

?　space-around：行與行間距相等，首行離交叉軸起點(diǎn)和尾行離交叉軸終點(diǎn)的距離為行與行間間距的一半。

?　space-evenly：行間間距、首行離交叉軸起點(diǎn)和尾行離交叉軸終點(diǎn)的距離相等。

視頻講解

這里以水平方向作為主軸為例，假設(shè)有項(xiàng)目A~E共5個(gè)組件且寬度不同，align-content取不同值時(shí)的效果如圖3-12所示。

圖3-12 align-content屬性值對(duì)照?qǐng)D

3.3.3 項(xiàng)目屬性

1 order屬性

order屬性用于設(shè)置項(xiàng)目沿主軸方向上的排列順序，數(shù)值越小，排列越靠前。另外，該屬性值為整數(shù)。

其語(yǔ)法格式如下：

.item{
  order: 0（默認(rèn)值）| <integer>
}

視頻講解

這里以水平方向?yàn)槔僭O(shè)有項(xiàng)目A、B、C 3個(gè)組件，寬、高均相同，order取不同值時(shí)的效果如圖3-13所示。

圖3-13 order屬性值對(duì)照?qǐng)D

2 flex-shrink屬性

flex-shrink屬性用于設(shè)置項(xiàng)目收縮因子。當(dāng)項(xiàng)目在主軸方向上溢出時(shí)，通過(guò)項(xiàng)目收縮因子的規(guī)定比例壓縮項(xiàng)目以適應(yīng)容器。

其語(yǔ)法格式如下：

其屬性值為項(xiàng)目的收縮因子，只能是非負(fù)數(shù)。

當(dāng)發(fā)生溢出時(shí)，項(xiàng)目尺寸的收縮公式如下：

最終長(zhǎng)度=原長(zhǎng)度×(1-溢出長(zhǎng)度×收縮因子/壓縮總權(quán)重)

其中壓縮總權(quán)重的計(jì)算公式如下：

壓縮總權(quán)重=長(zhǎng)度1×收縮因子1+長(zhǎng)度2×收縮因子2 … +長(zhǎng)度N×收縮因子N

這里以水平方向?yàn)槔僭O(shè)有項(xiàng)目A、B、C幾個(gè)組件，寬度均為200px，分別設(shè)置項(xiàng)目的收縮因子為1、2、3，WXSS示例代碼如下：

視頻講解

假設(shè)容器寬度僅有500px，此時(shí)3個(gè)項(xiàng)目的寬度之和為600px，顯然會(huì)發(fā)生溢出100px的情況，因此觸發(fā)收縮因子進(jìn)行寬度壓縮。

首先計(jì)算壓縮總權(quán)重：

壓縮總權(quán)重=200×1+200×2+200×3=1200px

當(dāng)發(fā)生溢出時(shí)，項(xiàng)目尺寸的收縮公式如下：

項(xiàng)目A的寬度=200×(1-100×1/1200)≈183px
項(xiàng)目B的寬度=200×(1-100×2/1200)≈166px
項(xiàng)目C的寬度=200×(1-100×3/1200)=150px

由此可見(jiàn)，原先同樣寬度的項(xiàng)目組件由于收縮因子不同被壓縮后的寬度各不相同，并且證明了收縮因子數(shù)值越大，被壓縮后的長(zhǎng)度越短。

上述例子的示意效果如圖3-14所示。

圖3-14 flex-shrink應(yīng)用對(duì)照?qǐng)D

需要注意的是，只有項(xiàng)目的flex-shrink屬性值總和大于1時(shí)溢出長(zhǎng)度按照實(shí)際計(jì)算，當(dāng)總和小于1時(shí)溢出長(zhǎng)度的計(jì)算公式如下：

溢出長(zhǎng)度=實(shí)際溢出長(zhǎng)度×(收縮因子1+收縮因子2+…+收縮因子N)

例如，上面示例中項(xiàng)目A、B、C的flex-shrink屬性值如果分別更新為0.1、0.2、0.3，總和為0.6，小于1，則溢出長(zhǎng)度的計(jì)算如下：

溢出長(zhǎng)度=100×(0.1+0.2+0.3)=60px

后續(xù)的計(jì)算和前面完全一樣。

3 flex-grow屬性

flex-grow屬性用于設(shè)置項(xiàng)目擴(kuò)張因子。當(dāng)項(xiàng)目在主軸方向上還有剩余空間時(shí)，通過(guò)設(shè)置項(xiàng)目擴(kuò)張因子進(jìn)行剩余空間的分配。

其語(yǔ)法格式如下：

其屬性值為項(xiàng)目的擴(kuò)張因子，只能是非負(fù)數(shù)。

當(dāng)發(fā)生擴(kuò)張時(shí)，項(xiàng)目尺寸的擴(kuò)張公式如下：

最終長(zhǎng)度=原長(zhǎng)度+擴(kuò)張單位×擴(kuò)張因子

其中，擴(kuò)張單位的計(jì)算公式如下：

擴(kuò)張單位=剩余空間/(擴(kuò)張因子1+擴(kuò)張因子2+…+擴(kuò)張因子N)

這里以水平方向?yàn)槔僭O(shè)有項(xiàng)目A、B、C 3個(gè)組件，寬度均為100px，分別設(shè)置項(xiàng)目的擴(kuò)張因子為0、1、2，WXSS示例代碼如下：

視頻講解

假設(shè)容器寬度為600px，此時(shí)3個(gè)項(xiàng)目的寬度之和為300px，顯然會(huì)出現(xiàn)多出300px剩余空間的情況，因此觸發(fā)擴(kuò)張因子進(jìn)行寬度擴(kuò)張。

首先計(jì)算擴(kuò)張單位：

擴(kuò)張單位=300/(0+1+2)=100px

然后將剩余空間分配給項(xiàng)目寬度，新的項(xiàng)目寬度擴(kuò)張公式如下：

項(xiàng)目A的寬度=100+100×0=100px
項(xiàng)目B的寬度=100+100×1=200px
項(xiàng)目C的寬度=100+100×2=300px

由此可見(jiàn)，原先同樣寬度的項(xiàng)目組件由于擴(kuò)張因子不同被擴(kuò)張后的寬度各不相同，并且證明了擴(kuò)張因子數(shù)值越大，被擴(kuò)張后的長(zhǎng)度越長(zhǎng)。

上述示例的示意效果如圖3-15所示。

圖3-15 flex-grow應(yīng)用對(duì)照?qǐng)D

需要注意的是，只有項(xiàng)目的flex-grow屬性值總和大于1時(shí)擴(kuò)張單位按照實(shí)際計(jì)算，當(dāng)總和小于1時(shí)擴(kuò)張單位就是全部的剩余空間。

例如，上面示例中項(xiàng)目A、B、C的flex-grow屬性值如果分別更新為0.1、0.2、0.3，總和為0.6，小于1，則擴(kuò)張單位就是300px。后續(xù)的計(jì)算與前面完全一樣。

4 flex-basis屬性

flex-basis屬性根據(jù)主軸方向代替項(xiàng)目的寬或高，具體說(shuō)明如下：

?　當(dāng)容器設(shè)置flex-direction為row或row-reverse時(shí)，若項(xiàng)目的flex-basis和width屬性同時(shí)存在數(shù)值，則flex-basis代替width屬性。

?　當(dāng)容器設(shè)置flex-direction為column或column-reverse時(shí)，若項(xiàng)目的flex-basis和height屬性同時(shí)存在數(shù)值，則flex-basis代替項(xiàng)目的height屬性。

其語(yǔ)法格式如下：

.item{
  flex-basis: auto（默認(rèn)值）| <number>px
}

需要注意的是，數(shù)值比auto的優(yōu)先級(jí)更高，如果flex-basis屬性值為auto，而width（或height）屬性值是數(shù)值，則采用數(shù)值作為最終屬性值。

這里以水平方向作為主軸為例，假設(shè)有項(xiàng)目A、B、C 3個(gè)組件且寬度均為100px，為A追加flex-basis值為200px，最終示意效果如圖3-16所示。

視頻講解

圖3-16 flex-basis屬性值對(duì)照?qǐng)D

由該圖可見(jiàn)，項(xiàng)目A的寬度比B和C寬，這是因?yàn)閒lex-basis的優(yōu)先級(jí)大于width。

5 flex屬性

flex屬性是flex-grow、flex-shrink、flex-basis的簡(jiǎn)寫方式，其語(yǔ)法格式如下：

若將屬性值設(shè)置為none，等價(jià)于0 0 auto；若設(shè)置為auto，等價(jià)于1 1 auto。

6 align-self屬性

align-self屬性設(shè)置項(xiàng)目在行中交叉軸方向上的對(duì)齊方式，用于覆蓋容器的align-items，這么做可以對(duì)項(xiàng)目的對(duì)齊方式做特殊處理。

其語(yǔ)法格式如下：

其默認(rèn)屬性值為auto，表示繼承容器的align-items值。如果容器沒(méi)有設(shè)置align-items屬性，則align-self的默認(rèn)值auto表示為stretch。其他屬性值參照align-items的說(shuō)明。

這里以水平方向?yàn)槔僭O(shè)有項(xiàng)目A、B、C、D 4個(gè)組件，其中A、B、C的寬／高均相同，D不定義高度，align-self取不同值時(shí)的效果如圖3-17所示。

視頻講解

圖3-17 align-self屬性值對(duì)照?qǐng)D