如何实现仿Google Meet的Flex子项每行等宽自适应布局？

你当前使用 flex: 1 0 25% 的问题在于：当最后一行子项数量不足4个时，flex-grow: 1 会让这些子项拉伸填满剩余空间，导致宽度大于其他行的子项；而 flex: 0 0 25% 虽然能固定宽度，却又失去了子项数量≤4时的自适应占满能力。

最优解决方案：CSS Grid #

CSS Grid 能更简洁地实现你需要的响应式等分布局，完全匹配「1个占满全屏、2个各占一半、最多4个每行、所有子项宽度一致」的需求：

.video-container {
  background-color: blue;
  min-height: 90vh;
  display: grid;
  /* 自动适配列数：每列最小宽度25%，剩余空间自动均分 */
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  gap: 0; /* 不需要间距可设为0，需要时调整数值即可 */
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例，可选属性 */
}

HTML代码保持不变即可。

方案说明：

• repeat(auto-fit, minmax(25%, 1fr)) 会自动计算列数：
  • 当容器宽度足够放下4列时，每列固定为25%宽度；
  • 当子项数量≤4时，列数等于子项数量，每列自动均分容器宽度（1个时占100%，2个时各占50%，3个时各占33.333%）；
  • 所有子项宽度始终保持一致，不会出现最后一行拉伸变形的问题。

若坚持使用Flex实现（相对繁琐） #

如果必须用Flex布局，可结合媒体查询实现基于容器宽度的响应式调整，但无法直接根据子项数量动态均分，代码如下：

.video-container {
  background-color: blue;
  min-height: 90vh;
  display: flex;
  flex-wrap: wrap;
}

.video {
  flex-basis: 25%;
  flex-shrink: 0; /* 禁止子项缩小 */
}

/* 当容器宽度不足以放下4列时，调整为2列布局 */
@media (max-width: calc(4 * 200px)) { /* 200px为子项最小宽度，可按需修改 */
  .video {
    flex-basis: 50%;
  }
}

/* 当容器宽度不足以放下2列时，调整为1列布局 */
@media (max-width: calc(2 * 200px)) {
  .video {
    flex-basis: 100%;
  }
}

内容的提问来源于stack exchange，提问作者stalwart1014