1、關(guān)于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
