微信小程序，flex布局。flex布局是一种html上的语法，可以方便对父子关系的标签进页面布局。代码样例：
index.wxml文件
<!--pages/index/index.wxml-->
<view>示例一</view>
<view class="menu">
<view class="item">
<image src="/static/hg.jpg"></image>
<text>精品</text>
</view>
<view class="item">
<image src="/static/hg.jpg"></image>
<text>精品</text>
</view>
<view class="item">
<image src="/static/hg.jpg"></image>
<text>精品</text>
</view>
<view class="item">
<image src="/static/hg.jpg"></image>
<text>精品</text>
</view>
</view>
index.wxss文件
/* pages/index/index.wxss */
.c1 {
color: red;
}
image {
width: 100rpx;
height: 100rpx;
}
.menu {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.menu .item {
display: flex;
flex-direction: column;
}
flex布局特点是，对父节点指定配置后还可以对子节点设置另外的属性，相当于全局配置与局部配置，微信小程序常用标签比较少（view、text、image等），所以flex语法指定父子布局会比较方便简洁。