微信小程序 View 支持兩種布局方式：Block 和 Flex
所有 View 默認都是 block
要使用 flex 布局的話需要顯式的聲明(給父元素)：
display:flex;
1
下面就來介紹下微信小程序的 Flex 布局
先做一個簡單的 demo
<view class="main">
<view class="item item1">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
</view>
1
2
3
4
5
加上背景色能看的更清楚些
.main {
width: 100%;
background-color: antiquewhite;
}
.item {
height: 100rpx;
width: 100rpx;
}
.item1 {
background-color: red;
}
.item2 {
background-color: dodgerblue;
}
.item3 {
background-color: greenyellow;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
然后大概是這個樣子的：
然后給 .main (父元素)加上 display: flex 樣式屬性
好使用 flex 布局
首先是橫向布局和豎向布局，要給父元素設置屬性 flex-direction ,它有4個可選值：
row：從左到右的水平方向為主軸
row-reverse：從右到左的水平方向為主軸
column：從上到下的垂直方向為主軸
column-reverse：從下到上的垂直方向為主軸
我們來看下設置 row 和 row-reverse 的區別：
row：
row-reverse：
然后我們要設置元素在橫向上的布局方向，需要設置 justify-content 屬性，它有5個值可選：
flex-start：主軸起點對齊(默認值)
flex-end：主軸結束點對齊
center：在主軸中居中對齊
s* pace-between：兩端對齊，除了兩端的子元素分別靠向兩端的容器之外，其他子元素之間的間隔都相等
space-around：每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同
然后我們要設置元素在縱向上的布局方向，需要設置 align-items 屬性，它有5個值可選：
stretch 填充整個容器(默認值)
flex-start 側軸的起點對齊 （這里我們手動設置下子 view 的高度，來看的明顯一些）
flex-end 側軸的終點對齊
center 在側軸中居中對齊
baseline 以子元素的第一行文字對齊
子 View 還有個屬性 align-self，可以覆蓋父元素的 align-items 屬性，它有6個值可選：auto | flex-start | flex-end | center | baseline | stretch （auto 為繼承父元素 align-items 屬性，其他和 align-items 一致）
比如上面最后一個 baseline 的例子，我們把 item3 設置 align-self:flex-end;
就成了這個樣子：
此外還有 flex-wrap 屬性，用於控制子 View 是否換行，有3個值可選：
nowrap：不換行（默認）
wrap：換行
wrap-reverse：換行，第一行在最下面
還有子 View 有個 order 屬性，可以控制子元素的排列順序，默認為0。
比如還是上面那個例子，我們把 item3 設置 order:-1; 可以把 item3 排在前面
flex 常用布局就這些
寫微信小程序的可以試試
————————————————
版權聲明：本文為CSDN博主「maindek」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/maindek/java/article/details/83307804