小程序4——UI布局问题（持续更新）

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