微信小程序布局技巧（一）
前言
小程序布局方式
Block布局方式
flex布局方式
wxss添加樣式
wxml應用樣式
效果
flex布局種類
justify-content屬性
align-items屬性
flex-wrap 屬性
應用
尾巴
前言
友情提示，閱讀本文之前，可能需要有一點微信小程序開發基礎。本文旨在為那些剛入坑微信小程序（文中后面統稱小程序）或者入坑后對頁面UI布局有困難的開發者，老鳥和大神請無視。如果你還沒有任何小程序的基礎，建議移步官方教程：
小程序官方教程
小程序布局方式
小程序是通過wxss（樣式）和wxml（組件）組合，一起來實現UI排列和復雜布局，分為Block和flex兩種布局方式。
Block布局方式
我們先來看一段代碼：
// 未添加任何樣式
<view>
<view>test1</view>
<view>test2</view>
</view>
1
2
3
4
5
最終呈現效果為：
可以看到未添加任何樣式，默認為豎直排列的。熟悉移動開發的朋友可能要問了，那么我想要實現橫向排列、垂直居中、水平居中、靠右，靠左等效果應該怎么做了？不要急，該來的可能會遲到，終歸是不會缺席的。
flex布局方式
大家都知道小程序樣式控制是通過wxss文件來控制，實現復雜布局一般我們都是通過flex布局方式來實現，要使用 flex 布局的話需要顯式的聲明：display:flex; 接下來我們就給上面的布局加上樣式，使test1和test2兩個view能橫向排列。
wxss添加樣式
// 橫向布局
.page {
display: flex;
flex-direction: row;
}
1
2
3
4
5
wxml應用樣式
<view class='page'>
<view>test1</view>
<view>test2</view>
</view>
1
2
3
4
效果
從效果圖可以看到，已經達到了我們需要橫向布局的效果了。
flex布局種類
首先我們不管是橫向布局和豎向布局，要設置屬性 flex-direction ,它有4個可選值：
row：從左到右的水平方向為主軸
row-reverse：從右到左的水平方向為主軸
column：從上到下的垂直方向為主軸
column-reverse：從下到上的垂直方向為主軸
為了能更好的看到效果，我們改動下代碼，給每個view增加色塊區分，然后分別展示每個值得不同排列效果：
row：
row-reverse：
column：
column-reverse：（parent view高度固定為750rpx效果）
相信不用我來解釋，大家也能猜到這四個值分別能實現什么樣的效果了吧。關於橫向和縱向的布局我就不贅述了，各位看官可自行擼碼體會。
除了上面提到的控制橫向和縱向布局的屬性了，常用的還有justify-content、align-items、flex-wrap等屬性來輔助我們實現復雜的布局。
justify-content屬性
這個屬性指的是主軸方向上的子元素的布局方式，它有5個可選值：
flex-start：主軸起點對齊(默認值)
flex-end：主軸結束點對齊
center：在主軸中居中對齊
space-between：兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等
space-around：每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同
這里的主軸指的是父元素中的flex-direction屬性指定的元素
還是分別來展示下效果（默認以橫向排列為主軸）：
flex-start效果同前面橫向排列相同，這里不做展示了
flex-end：
center:
space-between:
space-around:
align-items屬性
這個屬性指的是側軸方向上的子元素的布局方式，它有5個可選值：
stretch 填充整個容器，當元素未設置側軸方向的長度時，充滿父元素，如設置了側軸方向長度，則以子元素設置的長度為准(默認值)
flex-start 側軸的起點對齊 （這里我們手動設置下子 view 的高度，來看的明顯一些）
flex-end 側軸的終點對齊
center 在側軸中居中對齊
baseline 以子元素的第一行文字對齊
這里的側軸指的是父元素中的flex-direction屬性指定的元素方向的垂直的方向
接下來分別來展示下效果（默認以縱向排列為主軸，用橫向方向演示側軸排列效果,橫向寬度固定為750rpx，方便演示）：
stretch :（test1元素側軸方向長度未設置，也就是未設置寬度，test2元素側軸方向的長度(寬度)設置100rpx）
flex-start：
flex-end：
center ：
baseline：（以子元素的第一行文字對齊，由於文字顯示必須橫向排列，無法縱向排列，所以這里只能以橫向排列為主軸顯示效果）
修改下樣式：
.page {
display: flex;
flex-direction: row;
align-items: baseline;
}
.test1 {
padding-top: 40rpx;
text-align: center;
width: 100rpx;
height: 100rpx;
background: green;
}
.test2 {
width: 100rpx;
height: 100rpx;
background: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
效果圖：
flex-wrap 屬性
這個屬性用於控制子元素 是否換行，有3個值可選：
nowrap：不換行（默認）
wrap：換行
wrap-reverse：換行，第一行在最下面
為了更好的顯示效果，我們多增加幾個元素來演示：
nowrap：
wrap：
wrap-reverse：
以上就是小程序開發中常用到的一些布局方式，將上面總結的這些屬性都熟悉之后，相信聰明的你能舉一反三，能解決絕大部分的布局問題，各位看官不妨自己擼碼試試上面的這些效果。
應用
上面說了這么多理論知識，現在我們就來寫個小例子來實操下，我們要實現效果是一個帶刪除按鈕的矩形輸入框，大概長下面的樣子：
我們先寫好布局，代碼如下：
<view class='row'>
<input class='input' placeholder='please input'/>
<icon type='clear'/>
</view>
1
2
3
4
然后是樣式：
.row{
display: flex;
flex-direction: row;//指定橫向布局
justify-content: flex-end;//主軸結束點對齊
align-items: center;//側軸居中(垂直居中)
border: 1rpx solid #ccc;//邊框
margin: 20rpx;//邊距，為了更加美觀，不加沒影響
border-radius: 20rpx;//圓角
}
.input {
padding-top: 10rpx;
padding-bottom: 10rpx;
flex: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注釋上面已經加的很清楚了，可以對照上面的知識點來解析這個布局和樣式為什么要這么寫，我這里只是實現一個很簡單的例子，屬於拋磚引玉的作用，相信各位讀者肯定能實現更多豐富的布局效果。
尾巴
筆者才疏學淺，只是想着將自己的理解共享出來，以期能給需要幫助的能帶來幫助。如果文中出現錯誤，歡迎拍磚指正，也歡迎給我留言。
————————————————
版權聲明：本文為CSDN博主「abs625」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/abs625/java/article/details/89562048