Flexbox内嵌Video的两个布局问题求助

嘿，我来帮你搞定Flexbox里视频的这两个问题！

问题1：视频尺寸与下方控制栏不匹配 #

你猜的没错，这确实和Flex的对齐以及元素尺寸的基准有关。核心思路是让视频和控制栏基于同一个宽度容器，并且保证视频的缩放不会脱离这个基准。

给你一个具体的实现方案：

1. 把视频和控制栏放在一个垂直方向的Flex容器里（flex-direction: column）
2. 让视频自适应容器宽度，同时保持比例不变
3. 确保控制栏和视频的宽度计算逻辑一致

/* 外层Flex容器，垂直排列视频和控制栏 */
.video-container {
  display: flex;
  flex-direction: column;
  width: 80%; /* 你可以设置自己需要的基础宽度，比如100%或者固定值 */
  margin: 0 auto; /* 居中显示，可选 */
}

/* 视频样式：自适应宽度，保持比例 */
.video-container video {
  width: 100%;
  height: auto; /* 关键：让高度随宽度自动缩放，保持视频比例 */
  object-fit: contain; /* 可选：如果想完整显示视频内容不裁剪用contain，想填满容器用cover */
}

/* 控制栏样式：确保宽度和视频一致 */
.control-bar {
  width: 100%;
  padding: 10px;
  background: #333;
  color: #fff;
  /* 其他控制栏样式 */
}

/* 全局设置：避免padding/border影响宽度计算 */
* {
  box-sizing: border-box;
}

这样设置后，视频和控制栏会完全对齐，视频的高度会根据宽度自动调整，不会出现尺寸错位的情况。

问题2：水平缩放时width:100%忽略margin #

width:100%是相对于父容器的内容宽度，不会自动减去自身的margin，所以会导致溢出。解决方法有两种，选你觉得顺手的就行：

方法1：用容器包裹视频，给容器加margin #

/* 外层容器负责margin */
.video-wrapper {
  margin: 0 20px; /* 左右各20px的margin */
}

/* 视频在容器里占满宽度 */
.video-wrapper video {
  width: 100%;
  height: auto;
}

方法2：用calc直接计算视频宽度 #

如果不想额外加容器，可以直接用calc减去margin的总和：

.video-container video {
  width: calc(100% - 40px); /* 左右margin各20px，总和40px */
  margin: 0 20px;
  height: auto;
}

同样别忘了加上box-sizing: border-box，确保所有元素的宽度计算包含padding和border，避免意外溢出。

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