Vue

by kurimaron

HTML

<div id="app">
  <div class="flexBox">
    <div v-for="(item,key) in dataLists" class="flexItem" :key="key">
    {{key}}
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  /* padding: 20px; */
  font-family: Helvetica;
}

#app {
  background: #fff;
  /* border-radius: 4px; */
  /* padding: 20px; */
  /* transition: all 0.2s; */
}

.flexBox {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
}

.flexItem {
  background-color: palegreen;
  width: 24vw;
  border: solid 1px;
}

Vue

new Vue({
  el: "#app",
  data: {
    dataLists: [
      1,2,3,4,5,6,7,8,9,10,11,12
    ]
  }
})