Vue实现flex 多行多个布局,自动换行

效果图:


image.png

html:

css:

.home-card {
    width 100%
    overflow hidden
    padding 10px 0px
    display flex
    flex-wrap: wrap
    .home-item {
      width calc(25% - 30px)
      padding 20px 0px 20px 20px
      margin-right 10px
      margin-bottom 10px
      &:nth-child(8) {
        margin-right 0
      }
    }
  }

你可能感兴趣的:(Vue实现flex 多行多个布局,自动换行)