请教css布局问题，flex布局

Question

这是我想实现的效果

这是实际的效果

如图，一行不够四个元素的话间距就乱了

这是我的vue页面代码

<div class="allVideo">
        <div v-for="item in file" :key="item.id" class="video"
        @click="item.type=='pdf'? toPdf(item.src):toVideo(item.id,item.title,item.src)">
          <div class="imgContainer"><img :src="item.cover" alt=""></div>
          <p class="name">
            <span class="type" v-text="item.type=='视频'? '音视频':'文件'" 
            :style="{color:item.type=='视频'? 'blue':'red',borderColor:item.type=='视频'? 'blue':'red'}">
            </span>
            {{item.title}}
          </p>
          <p class="author"><i class="el-icon-office-building"></i>{{item.author}}</p>
        </div>
      </div>

这是我的css代码

.allVideo{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 10px 50px;
}
.video{
  /* width: 290px; */
  width: 22%;
  height: 300px;
  margin-bottom:25px;
  border: 1px solid rgb(238, 238, 238);
}

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

要解决这个问题，你可以尝试使用CSS Grid布局来代替Flexbox，因为CSS Grid更容易处理这种不均匀行的情况。但如果你仍然希望使用Flexbox，这里有一个解决方案：

在你的代码中，justify-content: space-between; 会使得元素在每一行中均匀分布，但当最后一行元素数量不足时，会导致对齐问题。为了解决这个问题，你可以创建一个“占位符”元素，它会在最后一行填补空白，以保持间距的一致性。

首先，你需要更新Vue模板，在循环结束之后添加一个占位符：

<div class="allVideo">
  <div v-for="item in file" :key="item.id" class="video" @click="...">
    <!-- 内容 -->
  </div>
  <!-- 添加占位符元素 -->
  <div class="video placeholder"></div>
</div>

然后，你需要为这个占位符元素定义样式，确保它在非空行时不显示，且在最后一行时占据必要的空间：

.placeholder {
  flex-shrink: 0; /* 不允许缩小 */
  width: calc(25% - (25% * 3 / 4)); /* 计算最后一行所需的宽度 */
  visibility: hidden; /* 隐藏元素，但保留空间 */
}

/* 当只有1个或2个元素时显示占位符 */
.allVideo .video:nth-child(n + 4):nth-last-child(-n + 2),
.allVideo .videonth-child(n + 3):last-child {
  visibility: visible;
}

这段CSS代码中，.placeholder 设置了宽度以占据最后一行应有的空间，同时通过 visibilityhidden 隐藏它。nth-child 和 last-child 选择器用于在只有1个、2个或3个元素在最后一行时显示占位符。

请注意，这种方法的一个缺点是，如果元素数量变化频繁，可能需要更复杂的逻辑来动态地添加或移除占位符。如果元素数量是固定的，CSS Grid布局可能会提供一个更简洁的解决方案。