html - 为什么具有相同百分比宽度的 div 不均匀呈现

Question

我正在制作基于 html 5 视频标签的自定义视频播放器 Controller 。从一开始我就在 px 中添加了 volume col 的宽度，但是当进入全屏模式时，它必须变大，所以我决定使用百分比。但是，虽然每个列的宽度都相等，但浏览器将其显示为不同。

https://jsfiddle.net/fu8cp8pb/

.volume-box {
  position: relative;
  cursor: pointer;
  display: inline-block;
  height: 100px;
  display: flex;
  align-items: center;
  width: 50px;
}

.volume {
  display: inline-block;
  height: 85%;
  width: 7%;
  background: #00adef;
}

.volume.trans {
  background: white;
}

<div class="volume-box">
  <div class="volume trans" data-value="0"></div>
  <div class="volume" data-value="0.1"></div>
  <div class="volume trans" data-value="0.15"></div>
  <div class="volume" data-value="0.2"></div>
  <div class="volume trans" data-value="0.25"></div>
  <div class="volume" data-value="0.3"></div>
  <div class="volume trans" data-value="0.35"></div>
  <div class="volume" data-value="0.4"></div>
  <div class="volume trans" data-value="0.45"></div>
  <div class="volume" data-value="0.5"></div>
  <div class="volume trans" data-value="0.55"></div>
  <div class="volume" data-value="0.6"></div>
  <div class="volume trans" data-value="0.65"></div>
  <div class="volume" data-value="0.7"></div>
  <div class="volume trans" data-value="0.75"></div>
  <div class="volume" data-value="0.8"></div>
  <div class="volume trans" data-value="0.85"></div>
  <div class="volume" data-value="0.95"></div>
  <div class="volume trans" data-value="1"></div>
</div>

Answer 1

对于 flex 布局，如果你想在你的 flex child 中使用固定宽度，你想使用 flex-basis 而不是 width，如果你想确保它们都是相同的宽度，将 flex-shrink 和 flex-grow 指定为 0。或简称 flex: 0 0 7%。

.volume-box {
  position: relative;
  cursor: pointer;
  display: inline-block;
  height: 100px;
  display: flex;
  align-items: center;
  width: 50px;
}

.volume {
  height: 85%;
  background: #00adef;
  flex: 0 0 7%;
}

.volume.trans {
  background: white;
}

<div class="volume-box">
  <div class="volume trans" data-value="0"></div>
  <div class="volume" data-value="0.1"></div>
  <div class="volume trans" data-value="0.15"></div>
  <div class="volume" data-value="0.2"></div>
  <div class="volume trans" data-value="0.25"></div>
  <div class="volume" data-value="0.3"></div>
  <div class="volume trans" data-value="0.35"></div>
  <div class="volume" data-value="0.4"></div>
  <div class="volume trans" data-value="0.45"></div>
  <div class="volume" data-value="0.5"></div>
  <div class="volume trans" data-value="0.55"></div>
  <div class="volume" data-value="0.6"></div>
  <div class="volume trans" data-value="0.65"></div>
  <div class="volume" data-value="0.7"></div>
  <div class="volume trans" data-value="0.75"></div>
  <div class="volume" data-value="0.8"></div>
  <div class="volume trans" data-value="0.85"></div>
  <div class="volume" data-value="0.95"></div>
  <div class="volume trans" data-value="1"></div>
</div>