Flexbox通过可用空间换行到下一行

Question

使用Flexbox我似乎无法将div换行到新行而不会破坏先前的块内容。

我做了一个代码来解释：

.container {
  left: 0;
  right: 0;
  margin: auto;
  background-color: grey;
  width: 800px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.lightblue {
  background-color: lightblue;
  width: 300px;
  height: 100px;
  display: block;
}

.lightpink {
  background-color: lightpink;
  width: 300px;
  height: 50px;
}

.red {
  background-color: red;
  width: 300px;
  height: 50px;
}

body {
  margin 0;
  width: 100%;
  height: 100%;
}

<div class="container">

  <div class="lightblue"></div>
  <div class="lightpink"></div>
  <div class="red"></div>
</div>

我想要的是红色块显示为内嵌，位于我的浅蓝色块的右侧。

你能告诉我如何达到这个效果吗？

谢谢！

Answer 1

.container {
  left: 0;
  right: 0;
  margin: auto;
  background-color: grey;
  width: 800px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.lightblue {
  background-color: lightblue;
  width: 300px;
  height: 100px;
  display: block;
}

.lightpink {
  background-color: lightpink;
  width: 300px;
  height: 50px;
}

.red {
  background-color: red;
  width: 300px;
  height: 50px;
}

body {
   margin 0;
  width: 100%;
  height: 100%;
}

<div class="container">

  <div class="lightblue" ></div>
  <div>
      <div class="lightpink" ></div>
      <div class="red" ></div>
  </div>
</div>

您只需将.lightpink，.red包裹在div。

Answer 2

您可以通过将这3行添加到容器中来实现此目的。

  flex-direction: column;
  max-height: 100px;
  align-content: flex-start;

查看工具示例的小提琴。 https://jsfiddle.net/meercha/yn9gtnpc/1/