Content Table

小程序布局

微信小程序布局使用的是 Flex,只是某些地方稍微有些变种,下面演示小程序中主要使用到的 Flex 布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!--文件名: flex.wxml-->

<view class="container">
<view class="flex-section">
<text>justify-content: flex-start</text>
<view class="flex-items" style="justify-content: flex-start;">
<view class="flex-item bc_red"></view>
<view class="flex-item bc_green"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>

<view class="flex-section">
<text>justify-content: flex-end</text>
<view class="flex-items" style="justify-content: flex-end;">
<view class="flex-item bc_red"></view>
<view class="flex-item bc_green"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>

<view class="flex-section">
<text>justify-content: center</text>
<view class="flex-items" style="justify-content: center;">
<view class="flex-item bc_red"></view>
<view class="flex-item bc_green"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>

<view class="flex-section">
<text>justify-content: space-between</text>
<view class="flex-items" style="justify-content: space-between;">
<view class="flex-item bc_red"></view>
<view class="flex-item bc_green"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>

<view class="flex-section">
<text>justify-content: space-around</text>
<view class="flex-items" style="justify-content: space-around;">
<view class="flex-item bc_red"></view>
<view class="flex-item bc_green"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>

<view class="flex-section">
<text>align-items: center 垂直居中</text>
<view class="flex-items" style="justify-content: space-around; height: 200rpx; align-items: center;">
<view class="flex-item bc_red"></view>
<view class="flex-item bc_green"></view>
<view class="flex-item bc_blue"></view>
</view>
</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* 文件名: flex.wxss */

.container {
background-color: #EEE;
}

/**
* 盒子模型中,width 默认指的是 content 的宽度,如果想 width 表示包含边框在内的宽度,
* 则需要设置 box-sizing: border-box; 这样 border,padding,content 等加起来的
* 宽度为 width
*/
.flex-section {
width: 100%;
margin-bottom: 10rpx;
background-color: white;
box-sizing: border-box; /* 很重要,因为设置了 padding,否则 width: 100% 则超出了 parent 的 width */
padding: 10rpx;
}

.flex-section:last-child {
margin-bottom: 0;
}

.flex-items {
display: flex;
flex-direction: row;
margin-top: 10rpx;
}

.flex-item {
width: 100rpx;
height: 100rpx;
}

.bc_red {
background-color: #E68C23;
}

.bc_green {
background-color: #FCEB62;
}

.bc_blue {
background-color: #1DAF94;
}