⼩程序中的常⽤布局⽅式（总结）参照Android开发，总结了⼩程序的常⽤的两种布局⽅式：1、线性布局（横版、竖版）。2、⽹格布局。
效果图如下：
⼀、⽹格布局
（1）固定Item个数的⽹格布局，主要⽤于功能模块⼊⼝展⽰。
WXML：
<!-- ⽹格布局（固定个数） -->
<view class="container_h wrap">
<view class="block" ></view>
<view class="block" ></view>
<view class="block" ></view>
<view class="block" ></view>
<view class="block" ></view>
<view class="block" ></view>
<view class="block" ></view>
<view class="block" ></view>
</view>
WXSS：
.container_h {
display: flex;
flex-direction: row;
}写文章的小程序
.wrap {
flex-wrap: wrap;
}
.block {
width: 25%;
height: 200rpx;
}
（2）随机Item个数的⽹格布局，主要⽤于产品多列效果展⽰。
WXML：
<!-- ⽹格布局（随机个数） -->
<scroll-view class="container_g_list m_t_50" scroll-x="true">
<block wx:for="{{itemList}}" wx:key="name">
<view class="h_list_item">
<view class="container_v align_center p_10">
<image src="{{item.image}}" ></image>        <text >{{item.name}}</text>
</view>
</view>
</block>
</scroll-view>
WXSS：
.container_g_list{
white-space: wrap;/*不放这个不能横排*/
}
.container_g_list .h_list_item{
width: 50%;
height: 270rpx;
display: inline-block;/*不放这个不能横排*/
}
.p_10 {
padding: 10rpx;
}
.container_v {
display: flex;
flex-direction: column;
}
.align_center {
align-items: center;
}
⼆、线性布局
（1）竖版列表效果，⽤于产品列表展⽰。（默认）
WXML：
<!-- 线性布局（竖向，随机个数） -->
<view class="container_v">
<block wx:for="{{itemList}}" wx:key="name">
<view class="container_v align_center">
<image src="{{item.image}}" ></image>      <text >{{item.name}}</text>
</view>
</block>
</view>
WXSS：
.container_v {
display: flex;
flex-direction: column;
}
.align_center {
align-items: center;
}
（2）横版列表布局，⽤户产品列表展⽰。
WXML：
<!-- 线性布局（横向，随机个数） -->
<scroll-view class="container_h_list m_t_50" scroll-x="true">
<block wx:for="{{itemList}}" wx:key="name">
<view class="h_list_item">
<view class="container_v align_center">
<image src="{{item.image}}" ></image>        <text >{{item.name}}</text>
</view>
</view>
</block>
</scroll-view>
WXSS：
.container_h_list{
padding: 0 10rpx;
border-radius: 20rpx;
white-space: nowrap;/*不放这个不能横排*/
}
.container_h_list .h_list_item{
width: 200rpx;
height: 270rpx;
display: inline-block;/*不放这个不能横排*/
}
.container_v {
display: flex;
flex-direction: column;
}
.align_center {
align-items: center;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。