flex 布局 平均分布

 <el-form-item label="商品" prop="productCombinations" v-show="goodManageForm.combinationType === 1">
              <div class="w-100 h-auto">
                <div class="wrap_relevance">
                  <el-form-item
                    label-width="0"
                    class="relevance_item"
                    v-for="(relateStore,
                    relateIndex) in goodManageForm.productCombinations"
                    :key="relateIndex"
                    :prop="'productCombinations.' + relateIndex + '.quantity'"
                    :rules="goodManageRules.quantity"
                  >
                    <div class="w-100 flex relevance_item_son">
                      <div class="top">
                        <el-image
                          v-if="relateStore.pic"
                          style="width: 100px; height: 100px"
                          :src="relateStore.pic"
                          fit="cover"
                        ></el-image>
                        <img
                          v-else
                          src="@/assets/images/empty.png"
                          alt=""
                          class="flex-1"
                        />
                      </div>
                      <div class="bot">
                        <div class="flex-1 bot_item">
                          <div>{{ relateStore.productName }}</div>
                          <span>{{ relateStore.specificationsStr }}</span>
                        </div>
                        <el-input
                          placeholder="请输入数量"
                          v-model="relateStore.quantity"
                          clearable
                          size="small"
                          type="number"
                        >
                        </el-input>
                      </div>
                    </div>
                    <i
                      class="el-icon-error guige_chahao"
                      @click="
                        delectRelatedGoods(
                          relateIndex,
                          relateStore.relatedProductSkuId
                        )
                      "
                    ></i>
                  </el-form-item>
                  <!-- 最多五个没有 -->
                  <div class="relevance_item_empty"></div>
                  <div class="relevance_item_empty"></div>
                  <div class="relevance_item_empty"></div>
                  <div class="relevance_item_empty"></div>
                  <div class="relevance_item_empty"></div>
                </div>
                <dialog-table
                  :checked-data="checkedData"
                  @handleChooseData="handleChooseData"
                ></dialog-table>
              </div>
            </el-form-item>

.wrap_relevance {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.relevance_item_empty {
  height: 0px !important;
  width: 19%;
  visibility: hidden;
}