如何使用Flexbox实现层叠布局并垂直对齐视频容器

问题根因 #

你给.video-slider设置的align-items: center未生效，原因有两点：

1. 桌面端（≥1200px）断点下，.video-slider__content设置了18.5rem的超大右内边距，直接将视频容器挤压到了内容区域外，无法实现对齐
2. 未做视频容器叠加的偏移和层级设置

修复方案 #

仅需修改桌面端断点下的3处CSS规则即可实现需求，原有移动端/平板端布局不受影响：

@media (min-width: 1200px) {
  .video-slider {
    flex-flow: row;
    align-items: center;
    position: relative;
  }
  .video-slider__video {
    max-width: 50%;
    order: 2;
    z-index: 10;
    /* 左移25%实现叠加效果，可根据实际需求调整偏移值 */
    margin-left: -25%;
  }
  .video-slider__content {
    order: 1;
    justify-content: center;
    height: 600px;
    /* 调整右内边距留出叠加空间 */
    padding: 10rem 8rem 10rem 4rem;
    width: 75%;
  }
}

实现逻辑 #

• align-items: center会自动将高度自适应的视频容器与固定600px高的内容区域垂直居中对齐
• 视频容器设置负左margin偏移，配合层级调高，实现叠加在内容区域右侧上方的效果
• 所有修改仅作用于桌面端，原有小屏幕布局完全保留

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