视频中看到的灵活横幅

问题描述

我正在尝试复制视频中看到的运动和灵活的尺寸。 https://www.youtube.com/watch?v=WPWsGema_6o

基本上它只有 2 个 div 块，一个是图像，另一个是使用 videojs 的视频。 此外，一旦我的浏览器缩小到一定宽度，我想像视频中看到的那样垂直移动 div。

HTML 代码：

CSS 代码

.container {
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image {
  flex: 0 1 20%;
  background-color: white;
  width: 500px;
}

@media screen and (max-width: 768px) {
  .image {
    flex: 1 1 100px;
    width: 100%;
  }
  #vid {
    flex: 1 1 100px;
    width: 100%;
  }
}

解决方法

在媒体内部，您可以使用 flex-direction: column 更改 flex 容器的方向，您可以删除 flex-wrap，因为它不需要

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    width: 100%;
  }
  ...

你可以通过这个 Playground 了解更多关于 flex 基础的信息

https://codepen.io/enxaneta/full/adLPwv