如何用CSS实现Video.js控制栏布局：同级元素分三区域排列

核心思路 #

利用CSS Flexbox的换行和自动边距特性，无需额外嵌套容器，直接实现同级元素的分栏布局。

步骤1：修正HTML结构（修复语法错误+合法类名） #

注意：CSS类名不能以数字开头，同时需闭合标签引号：

<div class="video-control-bar">
  <div class="control-1"></div>
  <div class="control-2"></div>
  <div class="control-3"></div>
  <div class="control-4"></div>
  <div class="control-5"></div>
  <div class="control-6"></div>
  <div class="control-7"></div>
  <div class="control-8"></div>
  <div class="control-9"></div>
</div>

步骤2：编写CSS实现布局 #

通过Flexbox的flex-wrap: wrap让元素自动换行，再用margin-left: auto将指定元素推到右侧：

/* 控制栏基础布局：启用Flex换行 */
.video-js .video-control-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}

/* 顶部两个元素占满第一行 */
.control-1 {
  flex: 1 1 95%; /* 占95%宽度，可根据需求调整比例 */
}
.control-2 {
  flex: 1 1 5%; /* 占剩余5%宽度 */
}

/* 将第7-9个元素推到底部右侧 */
.control-7 {
  margin-left: auto; /* 自动填充左侧空白，实现右对齐 */
}

/* 可选：统一底部元素的尺寸行为，避免拉伸 */
.control-3, .control-4, .control-5, .control-6, .control-7, .control-8, .control-9 {
  flex: 0 0 auto; /* 保持自身宽度，不被拉伸 */
  margin: 0 4px; /* 可选：添加间距优化视觉 */
}

关键说明 #

1. 必须用.video-js .video-control-bar作为选择器，确保优先级高于Video.js默认样式。
2. margin-left: auto是Flexbox的核心技巧，无需浮动即可实现元素左右分布。
3. 若顶部两个元素的比例需要调整，直接修改flex属性中的百分比数值即可。

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