如何用Flexbox实现项目与侧边栏的指定对齐布局？

需求概述 #

需实现如下布局，右侧视频为同一内容，沿侧边纵向延伸：

调整后的代码 #

HTML代码 #

<section id="s2">
  <h2>What do we do here?</h2>
  <br>
  <div id="list">
    <div class="services">
      <div><a href="" id="item1" class="serviceclasses">Text A</a></div>
      <div><a href="" id="item2" class="serviceclasses">Text B</a></div>
      <div><a href="" id="item3" class="serviceclasses">Text C</a></div>
      <div><a href="" id="item4" class="serviceclasses">Text D</a></div>
      <div><a href="" id="item5" class="serviceclasses">Text E</a></div>
      <div><a href="" id="item6" class="serviceclasses">Text F</a></div>
    </div>
    <div class="side">
      <aside class="video-sidebar">
        <figure>
          <figcaption>VIDEO</figcaption>
          <div class="video">
            <video controls>
              <source src="felixynwa.mp4">
            </video>
          </div>
          <figcaption>VIDEO BOTTOM TEXT</figcaption>
        </figure>
      </aside>
    </div>
  </div>
  <br>
</section>

CSS代码 #

/* 最外层容器：文本区域与视频侧边栏横向排列 */
#list {
  display: flex;
  gap: 20px;
  align-items: stretch; /* 强制视频侧边栏与文本区域高度一致 */
}

/* 文本网格容器：自动换行，每行3列 */
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* 统一控制文本项间距，替代冗余margin */
  flex: 1; /* 占据容器剩余空间 */
}

/* 文本项样式：固定宽度占比，确保每行3个 */
.serviceclasses {
  box-sizing: border-box;
  text-align: center;
  background-color: #f5f5f5;
  color: #000;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
  flex: 1 1 calc(33.333% - 27px); /* 减去gap均分宽度，保证每行3项 */
  min-width: 180px; /* 小屏幕下避免过度挤压 */
}

/* 视频侧边栏：固定宽度，纵向适配高度 */
.side {
  flex: 0 0 280px; /* 固定宽度，不随容器缩放 */
  display: flex;
}

.video-sidebar {
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

figcaption {
  text-align: center;
  margin: 10px 0;
  font-weight: bold;
}

核心调整说明 #

• 外层Flex布局：给#list添加display: flex和align-items: stretch，让视频侧边栏与文本区域高度完全对齐，实现纵向延伸效果。
• 文本网格控制：修改.services的Flex属性，用gap替代重复margin，通过flex: 1 1 calc(33.333% - 27px)确保每行恰好显示3个文本项，同时设置最小宽度适配移动端。
• 视频侧边栏适配：给.side设置固定宽度，内部用Flex布局让视频垂直居中，视频宽度自适应容器保持比例。
• 样式精简：清理.serviceclasses中的重复属性，用box-sizing: border-box避免padding影响宽度计算。

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