vue v-for实现多行等分布局-三等分

关键在于容器元素的指定和项目元素。

容器元素要在for之外，项目元素在for之内

  <div class="wrapper">
<div class="wrapper-content" v-for="(resultListitem,resultListindex) in resultList">
  <barchart titles="项目规划名称1" status="2"></barchart>
   
</div>

 

.wrapper{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.wrapper-content{
  width: 33%;
}

调整wrapper-content width的百分比即可完成相应的等分布局。