WXOPEN Club

微信开发者工具如何将界面分为均匀12份，并插入图片？

发布于 8 年前作者 libai8948 次浏览最后编辑 8 年前来自 issues

就像这样排布一样，想知道如何做，谢谢！

2 回复
mqiao
mqiao1 楼6 年前

百度一下flex布局

tiangang
tiangang2 楼6 年前

大概类似下面这样：wxss

container: {
  display: flex;
  flex-flow: row wrap;
  justify-content:space-between;
  align-content: flex-start;
  align-items: center;
}
 
item: {
  flex: 0 0 45%;
  align-self:flex-start;
 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
   
  margin-left: 15rpx;
  margin-right: 15rpx;
  margin-top: 15rpx;
}

wxml

<view class='container' >
  <view class='item' wx:for="{{list}}" wx:key="unique">
    <image src='{{item.pic}}' mode='widthFix' style='width:100%;'/>
  </view>
</view>