快捷導(dǎo)航

微信小程序 flexbox layout快速實(shí)現(xiàn)基本布局的解決方案

更新時(shí)間：2020年03月24日 14:58:58 作者：算法與編程之美

flexbox layout 彈性盒子布局。彈性盒子可以快速的對(duì)小程序進(jìn)行布局。這篇文章主要介紹了微信小程序 flexbox layout快速實(shí)現(xiàn)基本布局的方法,需要的朋友可以參考下

問題描述

flexbox layout ——彈性盒子布局。彈性盒子可以快速的對(duì)小程序進(jìn)行布局。一般傳統(tǒng)的小程序布局方法對(duì)內(nèi)容量少的頁面而言很方便，但對(duì)頁面比較復(fù)雜的來講就很繁瑣了。所以使用 flexbox layout 對(duì)小程序頁面內(nèi)容進(jìn)行整體封裝布局，這樣既方便又快捷。那么如何使用彈性盒子快速實(shí)現(xiàn)小程序的基本布局呢？

傳統(tǒng)的布局方式對(duì)布局目標(biāo)的實(shí)現(xiàn)屬性賦值非常的分散，嚴(yán)重依賴內(nèi)容的大小和頁面的結(jié)構(gòu)，這樣操作起來非常的麻煩。而彈性盒子就比較靈活、統(tǒng)一，可以對(duì)整個(gè)頁面的布局進(jìn)行總體把控設(shè)置。彈性盒子就是將頁面的內(nèi)容整體放進(jìn)一個(gè)容器里面進(jìn)行整體的有結(jié)構(gòu)的布局設(shè)置讓頁面更加和諧。

解決方案

首先，對(duì) flexbox layout 的使用方法進(jìn)行簡單介紹。

先將所需封裝的內(nèi)容放在一個(gè) view 容器里面，再對(duì)該 view 容器定義一個(gè) class 。然后需要在 wxss 里面對(duì) class 進(jìn)行設(shè)置布局。

在 wxss 中首先用 display ： flex 將 view 容器變成一個(gè)彈性盒子，但是彈性盒子默認(rèn)的主軸方向是從左往右所以每個(gè)元素都是從左往右的放置。根據(jù)自己的需要修改主軸的方向。

這里以從上往下的主軸方向，垂直方向上均勻分布，元素在水平方向上居中顯示為例。在 wxss 用 flex-direction ： column 來實(shí)現(xiàn)從上到下的布局。但是會(huì)發(fā)現(xiàn)段與段之間太緊促了，這個(gè)時(shí)候就需要讓段落均勻分布，用 justify-content ： space-around 來實(shí)現(xiàn)。（注意：在使用 justify-content 的時(shí)候我們需要根據(jù)自己設(shè)置的布局方向?qū)撁娴母叨龋▽挾龋┻M(jìn)行適配，小程序會(huì)根據(jù)你所設(shè)置的對(duì)段落間的空間進(jìn)行調(diào)整。）。最后讓元素在水平方向上居中顯示，需要用 align-items ： center 來實(shí)現(xiàn)。

下面是用兩個(gè)彈性盒子（一個(gè)是垂直方向，另一個(gè)是水平方向）布局的案例代碼：

表 3.1.wxml 代碼

<view>
<image src="/pages/img/ 宣傳圖 2.jpg"></image>
<text> 從我做起 </text>
<text> 不信謠！不傳謠！ </text>
<text> 相信政府！相信國家！ </text>
</view>
<view>
<text> 戴口罩，勤洗手 </text>
<text> 不扎堆，拒聚餐 </text>
<text> 吃熟食，禁野味 </text>
<text> 常通風(fēng)，勿恐慌 </text>
<text> 早就醫(yī)，莫輕視 </text> 
</view>

表 3.2.wxss 代碼

.container1{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: red;
background-color: yellow
}
.container2{
background-color: yellow;
height: 20vh;
width: 70vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
color:blue
}
.view1{
height: 650rpx;
width: 550rpx
}

效果圖展示：

圖 3.1

對(duì) flexbox layout 的屬性總結(jié)：

彈性盒子布局具有六大屬性：

（ 1 ） flex-direction 屬性決定主軸的方向

row （默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。

row-reverse：主軸為水平方向，起點(diǎn)在右端。

column ：主軸為垂直方向，起點(diǎn)在上沿。

column-reverse ：主軸為垂直方向，起點(diǎn)在下沿

（ 2 ） flex-wrap屬性決定元素的換行

nowrap （默認(rèn)）：不換行。

wrap ：換行，第一行在上方

wrap-reverse：換行，第一行在下方。

（ 3 ） flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式

（ 4 ） justify-content 屬性定義內(nèi)容在主軸上的對(duì)齊方式。

flex-start（默認(rèn)值）：左對(duì)齊。

flex-end：右對(duì)齊。

center ：居中。

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。

space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。

（ 5 ） align-items 屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

flex-start：交叉軸的起點(diǎn)對(duì)齊。

flex-end：交叉軸的終點(diǎn)對(duì)齊。

center ：交叉軸的中點(diǎn)對(duì)齊。

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。

stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto ，將占滿整個(gè)容器的高度。

（ 6 ） align-content 屬性定義了多根軸線的對(duì)齊方式

flex-start：與交叉軸的起點(diǎn)對(duì)齊。

flex-end：與交叉軸的終點(diǎn)對(duì)齊。

center ：與交叉軸的中點(diǎn)對(duì)齊。

space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

結(jié)語

flexbox layout 彈性盒子布局以上只是介紹了簡單的容器屬性。由上面的介紹和代碼例子可以看出用它來對(duì)頁面布局非常的方便和快捷，所寫的代碼也十分精簡。掌握彈性盒子的容器屬性就可以輕松的玩轉(zhuǎn)小程序的頁面布局，高效又簡單。

到此這篇關(guān)于微信小程序 flexbox layout快速實(shí)現(xiàn)基本布局的解決方案的文章就介紹到這了,更多相關(guān)小程序flexbox layout布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: