左右结构 左边是商品分类 右边是小分类 或者是 商品列表 很常见

效果图

 

wxml

<!--index.wxml-->
<view class="container"><view class="nav_left"><view class="item">分类一</view><view class="item">分类二</view><view class="item">分类三</view></view><view class="content"><view class="item">商品一</view><view class="item">商品二</view><view class="item">商品三</view><view class="item">商品四</view><view class="item">商品五</view></view>
</view>

wxss

.container {display: flex;width: 100%;  height: 100%;  background-color: #fff;  color: #939393;  
}.nav_left{  width: 30%; height: 100%;  background: #f5f5f5;  text-align: center;  
}  .nav_left .item{  height: 40px;  line-height: 40px;  padding: 6px 0;  border-bottom: 1px solid #dedede;  font-size: 14px; 
}.content{display: flex;flex-wrap:wrap;background-color: #dedede;width:70%;height: 800rpx;border: 1px red solid;justify-content:flex-start;align-content: flex-start;
}.content .item{box-sizing:border-box;width: 33.3%;height: 100rpx;text-align: center;line-height: 100rpx;border: 1px #ccc solid;}