样式布局flex----一行五个元素，随着屏幕变化宽度发生改变

一行五个元素，随着屏幕宽度的变化，元素的宽度自适应宽度变化；

<template>
  <div class="wrapper">
    <ul class="list" v-if="projectList.length > 0">
      <li v-for="items in projectList" :key="items.id">
        <div class="poster-box">
          <el-card :body-style="{ padding: '0' }" class="poster-card">
            <div>{{ items.name }}</div>
          </el-card>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      projectList: [
        { id: 1, name: 'aa' },
        { id: 2, name: 'bb' },
        { id: 3, name: 'cc' },
        { id: 4, name: 'dd' },
        { id: 5, name: 'ee' },
        { id: 6, name: 'ff' },
        { id: 7, name: 'gg' },
        { id: 8, name: 'hh' },
        { id: 9, name: 'ii' },
        { id: 10, name: ' kk' },
      ],
    }
  },
}
</script>
<style scoped>
.wrapper {
  height: 980px;
  position: relative;
}
.list {
  list-style: none;
  border: 1px solid red;
  margin: 6px auto;
  /* width: 100%; */
  display: flex;
  align-items: center;
  /* 自动换行属性 */
  flex-wrap: wrap;
  /* justify-content: flex-start;
  align-items: center; */
}
li {
  /* 如果不设置margin的话：一行5个li，就设置成 flex: 0 0 20%;*/
  /* flex: 0 0 20%; */ /*表示当前子项目宽度为20%，父级空间有剩余，不会放大，空间不够用时，不会缩小*/
  flex: 0 0 20%;
}
.poster-box {
  margin-bottom: 20px;
  /* // padding: 15px calc((20% - 178px) / 2);
      //  width: 178px; */
  padding: 1%;
  min-width: 178px;
  width: 90%;
}
</style>