html - 在 flexbox 中遇到障碍，将一个 div 放在另一个下面，同时将第三个放在一边

Question

这里是CSS，来自媒体查询，全部显示:flex

video {
  height: 800px;
  width: auto;
}

.info {
  order: 2;
  border: 0.5 px solid #f7f7f7;
  background: white;
  width: 566.03px;
  height: max-content;
  position: relative;
}

.video-div {
  border: 0.5 px solid #f7f7f7;
  background: white;
  width: 566.03px;
  order: 1;
}

.interaction {
  order: 3;
  border: 0.5 px solid #f7f7f7;
  background: white;
  width: 566.03px;
  height: max-content;
}

.middle {
  height: 569px;
}

<main>
  <div> First div</div>
  <div> Second div</div>
  <div> Third div</div>
</main>

This is where I am.我需要将突出显示的 div 移动到第二个 div(小的“therock”div)下。

Answer 1

您可以使用 flex 轻松实现此目的。在我下面的例子中，有一个 flex-direction 设置为 row 的主 div。右列设置为 display: flex 和 flex-direction 列。这会水平堆叠 main 的子元素，垂直堆叠 right 的子元素。

html, body {
  height: 100%
}
.main {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.left {
  background: lightblue;
}

.right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: pink;
}

.fill {
  flex-grow: 1;
  background: yellow;
}

<div class="main">
  <div class="left"><img src="https://via.placeholder.com/150" /></div>
  <div class="right">
    <div>Blah blah blah</div>
    <div class="fill">More blah blah</div>
  </div>
</div>