Flexbox三视频并排布局：视口宽度变化间隙问题求助

问题分析 #

你遇到的是flex布局中小数宽度取整导致的渲染偏差：当视口宽度无法被3整除时，浏览器对每个视频容器的宽度计算会产生小数，渲染取整后某个容器的实际宽度略小于分配值，从而露出背景色（绿色间隙）。即使设置了视频width:100%，如果容器本身宽度计算有偏差，视频也无法填满容器。

优雅解决方案 #

核心修改：用flex: 1 1 0%确保弹性分配空间 #

给每个视频容器设置flex: 1 1 0%，让浏览器以0为基础宽度，按比例弹性分配父容器的可用空间，避免内容宽度干扰计算。同时配合视频的object-fit属性保证填充效果。

完整代码调整示例 #

/* 父容器样式 */
.video-wrapper {
  display: flex;
  width: 100%;
  /* 清除默认内外边距 */
  margin: 0;
  padding: 0;
}

/* 单个视频容器样式 */
.video-item {
  flex: 1 1 0%; /* 关键：弹性分配空间，基础宽度为0 */
  background-color: green;
  position: relative;
  overflow: hidden; /* 防止视频溢出容器 */
}

/* 视频元素样式 */
.video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例并填满容器，可选contain */
  display: block; /* 移除inline元素默认间距 */
}

关键说明 #

1. flex: 1 1 0%：flex-grow:1让容器能扩展占满剩余空间，flex-shrink:1允许收缩，flex-basis:0%确保分配空间时忽略容器自身内容宽度，彻底解决小数宽度偏差问题。
2. object-fit: cover：避免视频因拉伸变形，同时保证完全填满容器（如果需要完整显示视频内容，可替换为object-fit: contain）。
3. display: block：移除视频作为inline-block元素时默认的底部间隙，确保视频和容器完全贴合。

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