1、关于display:flex 多栏多列布局
小程序中推荐使用display:flex多栏布局，来简化页面布局
<ul class="ui-nav">
<li wx:for="{{nav_item}}" wx:key="item.id">
<image src="{{item.img}}" style="width:30px; height:30px" mode="aspectFit" />
<text>{{item.title}}</text>
</li>
</ul>
image.png
.ui-�nav {
width: 100%;
clear: both;
align-items: center;
margin: 8px 0;
}
.ui-nav li {
font-size: 12px;
padding: 4px 0;
align-items: center;
}
修改
.ui-�nav {
width: 100%;
clear: both;
align-items: center;
margin: 8px 0;
flex-direction: row;
display: flex;
}
image.png
再修改
.ui-�nav li {
width: 100%;
align-items: center;
text-align: center;
flex-direction: column;
display: flex;
}
image.png
