小程序類表格布局：運用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