問題描述

flexbox layout ——彈性盒子佈局。彈性盒子可以快速的對小程式進行佈局。一般傳統的小程式佈局方法對內容量少的頁面而言很方便，但對頁面比較複雜的來講就很繁瑣了。所以使用 flexbox layout 對小程式頁面內容進行整體封裝佈局，這樣既方便又快捷。那麼如何使用彈性盒子快速實現小程式的基本佈局呢？

傳統的佈局方式對佈局目標的實現屬性賦值非常的分散，嚴重依賴內容的大小和頁面的結構，這樣操作起來非常的麻煩。而彈性盒子就比較靈活、統一，可以對整個頁面的佈局進行總體把控設定。彈性盒子就是將頁面的內容整體放進一個容器裡面進行整體的有結構的佈局設定讓頁面更加和諧。

解決方案

首先，對 flexbox layout

先將所需封裝的內容放在一個 view 容器裡面，再對該 view 容器定義一個 class 。然後需要在 wxss 裡面對 class 進行設定佈局。

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

這裡以從上往下的主軸方向，垂直方向上均勻分佈，元素在水平方向上居中顯示為例。在 wxss 用 flex-direction ： column 來實現從上到下的佈局。但是會發現段與段之間太緊促了，這個時候就需要讓段落均勻分佈，用 justify-content ： space-around 來實現。（注意：在使用 justify-content 的時候我們需要根據自己設定的佈局方向對頁面的高度（寬度）進行適配，小程式會根據你所設定的對段落間的空間進行調整。）。最後讓元素在水平方向上居中顯示，需要用 align-items ： center

下面是用兩個彈性盒子（一個是垂直方向，另一個是水平方向）佈局的案例程式碼：

表 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> 常通風，勿恐慌 </text>
<text> 早就醫，莫輕視 </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

對 flexbox layout 的屬性總結：

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

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

row （預設值）：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

column ：主軸為垂直方向，起點在上沿。

column-reverse ：主軸為垂直方向，起點在下沿

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

nowrap （預設）：不換行。

wrap ：換行，第一行在上方

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

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

（ 4 ） justify-content 屬性定義內容在主軸上的對齊方式。

flex-start（預設值）：左對齊。

flex-end：右對齊。

center ： 居中。

space-between：兩端對齊，專案之間的間隔都相等。

space-around：每個專案兩側的間隔相等。

（ 5 ） align-items 屬性定義專案在交叉軸上如何對齊。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center ：交叉軸的中點對齊。

baseline: 專案的第一行文字的基線對齊。

stretch（預設值）：如果專案未設定高度或設為auto ，將佔滿整個容器的高度。

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

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center ：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

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

stretch（預設值）：軸線佔滿整個交叉軸。

結語

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

到此這篇關於微信小程式 flexbox layout快速實現基本佈局的解決方案的文章就介紹到這了,更多相關小程式flexbox layout佈局內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！