小程序建议使用flex布局进行排版
flex是一个盒装弹性布局
flex是一个容器,所有子元素都是他的成员
定义布局:display:flex
flex容器的属性:
一、flex-direction:排列方向
二、flex-wrap:换行规则
三、justify-content:对齐方式
四、order:成员之间的显示顺序
五、flex:成员所占屏幕的比例
一、flex-direction:排列方向
【默认】row:从左到右行排序
row-reverse:从右到左行排序
colomn:从上到下列排序
colomn-reverse:从下到上列排序
index.html中定义五个<view>分别加上a、b、c、d、e五个文本标签,微信小程序中默认flex-direction:row
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!--index.wxml--> Cynical丶Gary <view class="container"> <view class='a size'>a</view> <view class='b size'>b</view> <view class='c size'>c</view> <view class='d size'>d</view> <view class='e size'>e</view> </view>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.container{
display: flex;
/* 默认从左到右排序 */
/* flex-direction: row; */
/* 从右到左排序 */
/* flex-direction: row-reverse; */
/* 从上到下排序 */
/* flex-direction: column; */
/* 从下到上排序 */
/* flex-direction: column-reverse; */
}
.size{
width: 150rpx;
height: 150rpx;
}
.a{
background: red;
}
.b{
background: yellow;
}
.c{
background: blue;
}
.d{
background: green;
}
.e{
background: orange;
}
二、flex-wrap:换行规则
【默认】nowrap:不换行
wrap:换行
当五个元素size超出微信小程序横向排版时(320),微信小程序默认使用flex-wrap: nowrap不换行
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!--index.wxml--> Cynical丶Gary <view class="container"> <view class='a size'>a</view> <view class='b size'>b</view> <view class='c size'>c</view> <view class='d size'>d</view> <view class='e size'>e</view> </view>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.container{
display: flex;
/* 默认不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
/* flex-wrap: wrap; */
/* 逆向换行 */
/* flex-wrap: wrap-reverse; */
}
.size{
width: 500rpx;
height: 150rpx;
}
.a{
background: red;
}
.b{
background: yellow;
}
.c{
background: blue;
}
.d{
background: green;
}
.e{
background: orange;
}
三、justify-content:对齐方式
【默认】flex-start:从左到右,向左对齐
flex-end:从右到左,向右对齐
center:居中对齐
space-between:块级元素中间有空格
space-around:让空格围绕在成员周围
当五个元素并列排序size未超出微信小程序横向布局
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!--index.wxml--> Cynical丶Gary <view class="container"> <view class='a size'>a</view> <view class='b size'>b</view> <view class='c size'>c</view> <view class='d size'>d</view> <view class='e size'>e</view> </view>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.container{ display: flex; /* flex-start:默认左对齐 */ /* justify-content: flex-start; */ /* flex-end:向右对齐 */ /* justify-content: flex-end; */ /* center:居中对齐 */ /* justify-content: center; */ /* space-between:块级元素中间有空格 */ /* justify-content: space-between; */ /* space-around:让空格围绕在成员周围 */ /* justify-content:space-around; */ } .size{ width: 100rpx; height: 150rpx; } .a{ background: red; } .b{ background: yellow; } .c{ background: blue; } .d{ background: green; } .e{ background: orange; }
四、order:成员之间的显示顺序
五个元素并列排序由order属性决定,本来d和e中order属性分别是4和5,现将order属性改为5和4,可见d和e块级元素位置进行了交换
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!--index.wxml--> Cynical丶Gary <view class="container"> <view class='a size'>a</view> <view class='b size'>b</view> <view class='c size'>c</view> <view class='d size'>d</view> <view class='e size'>e</view> </view>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.container{ display: flex; } .size{ width: 100rpx; height: 150rpx; } .a{ background: red; order:1; } .b{ background: yellow; order:2; } .c{ background: blue; order:3; } .d{ background: green; order:4; } .e{ background: orange; order:5; }
五、flex:成员所占屏幕的比例
当给五个块级元素a、b、c、d、e设置order为1时候,每个元素所占当行比例的1/5,当将a的order设置为3时,a元素占当行比例的3/(3+1+1+1+1),依次类推
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!--index.wxml--> Cynical丶Gary <view class="container"> <view class='a size'>a</view> <view class='b size'>b</view> <view class='c size'>c</view> <view class='d size'>d</view> <view class='e size'>e</view> </view>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.container{ display: flex; } .size{ width: 100rpx; height: 150rpx; } .a{ background: red; order:1; flex:10; } .b{ background: yellow; order:2; flex:2; } .c{ background: blue; order:3; flex:1; } .d{ background: green; order:4; flex:1; } .e{ background: orange; order:5; flex:1; }