小程序类表格布局：运用for循环来进行flex布局

 

 

 wxml：

<view id="panel" class="flex-row">
  <view class="flex-cell" wx:for="{{add_expend}}" wx:for-item="expend" wx:key="add_expend" data-message="{{expend.message}}" bindtap="add_expend_fun">
    <text class="flex-text">{{expend.message}}</text>
  </view>
</view>

 

wxss：

#panel{
  margin: 5px 3vh 15px 3vh;
}

#panel .flex-cell{
  display: flex;
  height: 14vh;
  width: 14vh;
  border: 1rpx solid  #cccccc;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
}

.flex-row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap:wrap;
}
.flex-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  flex-wrap:wrap;
}

.flex-text{
  display: flex;
}

 

js：

  data: {
    add_expend:[{
        message:'美食',
      },{
        message:'娱乐',
      },{
        message:'理财',
      },{
        message:'油费',
      },{
        message:'保险',
      },{
        message:'炒股',
      },{
        message:'话费',
      },{
        message:'旅游',
      },{
        message:'购物',
      },{
        message:'其它支出',
      }]
  }

参考了flex教程XD

for循环里记得加双花括号，wx:for-item不注明的话默认是item