flex布局多列自适应 通用3列自适应

css

.item-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .itembox-item {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0.4rem;
    text-align: center;
    margin-bottom: 10px;
    background: rgb(233, 233, 233);
    border-radius: 0.2rem;
    color: #000;
  }
  & > i {
    width: 30%;
  }
}

html

      <div class="item-box">
                <div class="itembox-item" :class="pipeProblemType==item.id?'itemlaiyuan':''" v-for="item in guanwangleixing" :key="item.id"
                  @click="changeleixingguanwang(item.id)">
                  {{item.name}}
                </div>
                <i></i><i></i><i></i>
					三列就三个I标签
              </div>