微信小程序使用Flex容器

發表時(shí)間：2021-1-11

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

浏覽次數：73

Flex 是(shì) W3C 提出(chū)的(de)一種新的(de)布局方案，可以(yǐ)非常方便的(de)完成響應式頁面布局，到(dào)目前爲(wéi / wèi)止幾乎所有浏覽器都支持，Flex 是(shì) Flexible Box 的(de)縮寫，翻譯過來(lái)是(shì)”彈性布局”的(de)意思，下面一起來(lái)學習 Flex 布局的(de)使用。

基礎概念
flex容器屬性
flex項目屬性
總結

基礎概念

采用 Flex 布局的(de)元素稱爲(wéi / wèi) Flex 容器，所有子(zǐ)元素将自動成爲(wéi / wèi)容器成員，也(yě)可以(yǐ)稱之(zhī)爲(wéi / wèi) Flex 項目，也(yě)就(jiù)是(shì)該 Flex 布局的(de)子(zǐ) View ,下面是(shì) Flex 布局默認設置下的(de)示意圖：

如上(shàng)圖所示，默認的(de) Flex 容器的(de)存在(zài)兩個(gè)軸：水平的(de)主軸(main axis)和(hé / huò)垂直的(de)交叉軸(cross axis)，主軸和(hé / huò)交叉軸的(de)方向不(bù)是(shì)絕對的(de)，而(ér)是(shì)會因爲(wéi / wèi)設置的(de)不(bù)同而(ér)不(bù)同，下面是(shì)與主軸和(hé / huò)交叉軸相關的(de)幾個(gè)位置：

主軸起始點(main start):主軸的(de)開始位置
主軸的(de)結束點(main end):主軸的(de)結束位置
主軸空間(main size):單個(gè) Flex 項目占據的(de)主軸空間
交叉軸的(de)起始點(cross start):交叉軸的(de)起始點
交叉軸的(de)結束點(cross end):交叉軸的(de)結束點
交叉軸空間(cross size):單個(gè) Flex 項目占據的(de)交叉軸空間

flex容器屬性

flex-direction：設置主軸的(de)方向，可設置的(de)值如下：

row：默認值，設置主軸爲(wéi / wèi)水平方方向，起點在(zài)左邊
row-revarse：設置主軸爲(wéi / wèi)水平方向，起點在(zài)右邊
column：設置主軸爲(wéi / wèi)垂直方向，起點在(zài)上(shàng)邊
column-revarse：設置主軸爲(wéi / wèi)垂直方向，起點在(zài)下邊

2. flex-wrap：設置如何換行，可設置的(de)值如下：

nowrap：默認值，不(bù)換行
wap：自動換行
wrap-revarse：自動換行，在(zài)第一行的(de)上(shàng)一行

3. flex-flow：flex-direction 屬性和(hé / huò) flex-wrap 屬性的(de)簡寫形式，默認值爲(wéi / wèi) row nowrap。

4. justify-content：設置項目在(zài)主軸上(shàng)的(de)對齊方式，可設置的(de)值如下：

flex-start：默認值，左對齊
flex-end：右對齊
center：居中對齊
space-between：兩端對齊
space-around：每個(gè)項目兩側的(de)間隔相等，與屏幕邊緣的(de)間隔是(shì)其他(tā)項目之(zhī)間間隔的(de)一半
space-evenly：平均分布各個(gè)項目，與屏幕邊緣的(de)間隔與其他(tā)項目之(zhī)間的(de)間隔相等

5. align-items：設置項目在(zài)交叉軸上(shàng)如何對齊，可設置的(de)值如下：:默認值，如果沒有項目未指定高度或設置爲(wéi / wèi)auto,則項目會占滿整個(gè)容器的(de)高度，可設置的(de)值如下：

stretch：默認值，如果沒有項目未指定高度或設置爲(wéi / wèi)auto,則項目會占滿整個(gè)容器的(de)高度，下面圖示中項目 1 就(jiù)未指定高度，其餘項目都指定了(le／liǎo)高度
就(jiù)未指定高度
flex-start：設置與交叉軸的(de)起點對齊
flex-end：設置與交叉軸的(de)結束點對齊
center：設置與交叉軸的(de)重點對齊
baseline：設置項目與項目中第一行文字基線對齊

6. align-content：設置多根軸線的(de)對齊方式，如果隻有一個(gè)軸則該屬性不(bù)生效，可設置的(de)屬性如下：

stretch：默認值，軸線占滿整個(gè)交叉軸
flex-start：設置與與交叉軸的(de)起點對齊
flex-end：設置與交叉軸的(de)終點對齊
center：設置與交叉軸的(de)中點對齊
space-between：設置與交叉軸兩端對齊，軸線之(zhī)間的(de)間隔平均分布
space-around：設置每根軸線兩側的(de)間隔都相等，軸線與軸線的(de)間隔是(shì)軸線到(dào)交叉軸邊緣間隔的(de)兩倍

flex項目屬性

order：默認值爲(wéi / wèi)0，設置項目的(de)排列順序，數值越小，排列越靠前，如下圖所示：

2、flex-grow：設置項目的(de)放大(dà)比例，默認值爲(wéi / wèi)0，如果存在(zài)剩餘空間也(yě)不(bù)放大(dà)，如下圖所示：

3. flex-shrink：設置項目的(de)縮小比例，默認值爲(wéi / wèi) 1，如果項目空間不(bù)足，則項目将縮小，如下圖所示：

上(shàng)面圖示中，當 flex-shrink 全設置爲(wéi / wèi) 0，每個(gè)項目不(bù)會縮放，所以(yǐ)第四個(gè)方塊被擠出(chū)去了(le／liǎo)，而(ér)相應的(de)設置 flex-shrink 爲(wéi / wèi) 1，則可以(yǐ)在(zài)空間不(bù)足是(shì)進行一定程度的(de)縮放。