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

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

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

  

 

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

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

vue v-for实现多行等分布局-三等分_第1张图片

 

你可能感兴趣的:(vue)