微信小程序中的常用布局方式（总结）

参照Android开发，总结了微信小程序的常用的两种布局方式：1、线性布局（横版、竖版）。2、网格布局。

效果图如下：

一、网格布局

（1）固定Item个数的网格布局，主要用于功能模块入口展示。

WXML：

  

  

  

  

  

  

  

  

WXSS：

.container_h {

  display: flex;

  flex-direction: row;

}

.wrap {

  flex-wrap: wrap;

}

.block {

  width: 25%;

  height: 200rpx;

}

（2）随机Item个数的网格布局，主要用于产品多列效果展示。

WXML：

  

    

      

        

        {{item.name}}

      

    

  

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：

  

    

      

      {{item.name}}

    

  

WXSS：

.container_v {

  display: flex;

  flex-direction: column;

}

.align_center {

  align-items: center;

}

（2）横版列表布局，用户产品列表展示。

WXML：

  

    

      

        

        {{item.name}}

      

    

  

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;

}