如何在Flexbox布局下为iframe视频添加对齐的下方标题

解决方法 #

你需要将「单个视频+对应标题」打包成一个独立的布局单元，再交给外层的flex容器统一横向排列，就能保证标题和对应视频完美对齐。

修改后的CSS代码

.box-tricks {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 20px;
  /* 可选：小屏幕下子单元自动换行 */
  flex-wrap: wrap;
  /* 可选：子单元之间增加横向间隙 */
  gap: 16px;
}
/* 新增单个视频卡片样式 */
.video-card {
  /* 宽度和iframe保持一致 */
  width: 300px;
  display: flex;
  flex-direction: column;
  /* 视频和标题的垂直间距 */
  gap: 8px;
  /* 可选：标题居中显示，不需要可以删除 */
  text-align: center;
}

修改后的HTML代码

<div class="box-tricks">
  <!-- 第一个视频+标题单元 -->
  <div class="video-card">
    <iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
      frameborder="0" allowfullscreen></iframe>
    <p>第一个视频的自定义标题</p>
  </div>
  <!-- 第二个视频+标题单元 -->
  <div class="video-card">
    <iframe width="300" height="300" src="https://youtube.com/embed/DGBBkqamB80" 
      frameborder="0" allowfullscreen></iframe>
    <p>第二个视频的自定义标题</p>
  </div>
  <!-- 第三个视频+标题单元 -->
  <div class="video-card">
    <iframe width="300" height="300" src="https://youtube.com/embed/KRZtEXDeLVc" 
     frameborder="0" allowfullscreen></iframe>
    <p>第三个视频的自定义标题</p>
  </div>
</div>

原理解释 #

之前的写法是直接把标题元素和iframe都放在外层flex容器中，外层flex的横向排列规则会把所有子元素（包括标题）都排成一行，自然无法和对应视频匹配。现在每个视频和标题作为独立的子单元交给外层flex排列，子单元内部垂直排布内容，就完全解决了对齐问题。

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