css - 如何在 2 列布局中先填充右列，然后再填充左列

Question

我有 5 个 div 元素(这里以简化的方式)。我如何设置 css 来制作一个 2 列布局，前 2 个 div 在右边，其余 div 在左边，如图所示(如果需要，每个 div 元素可以用不同的类或 ID 标识)？右侧或左侧的 div 数量可以固定并提前知道，而不是动态飞行。两列可能有不同的高度，但它们需要在顶部对齐(即 div3 和 div1 从相同的垂直位置开始)。理想情况下，我不想在每个 div 元素或左列或右列上设置固定高度。

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Answer 1

1) 在容器上设置display:flex

2) 使用 flex-direction: column; 将 flex 容器的主轴设置为 block 轴(参见 flex-direction )

3) 使用 flex-wrap: wrap-reverse; 切换换行方向(参见 flex-wrap )

注意:这只有在容器具有固定高度时才能正常工作。 (感谢@Paulie_D)

演示:

.wpr {
  width: 30vw;
  height: 30vw;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}
.wpr div {
  width: 45%;
  height: 45%;
  border: 1px solid;
  margin: 1% 1% 1% 6%;
}
.wpr div:nth-child(n+3) {
  height: 30%;
}

<div class="wpr">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

---

由于 OP 添加了说明:

1) wrapper 可能没有固定的高度

2)右边div的个数可以固定(比如2个)

我们可以通过 float (和清除)前 2 个 div 来实现这个

.wpr {
  border: 1px solid;
  width: 50vw;
  padding: 1em;
  display: flow-root; /* create new block formatting context */
  /* Note: if ie/edge support is required use overflow: hidden
           instead of display: flow-root */
}
.wpr div {
  color: green;
  border: 1px solid;
  margin: 0.3em;
  padding: 1em;
  width: 35%;
}
.wpr div:nth-child(-n + 2) {
  color: red;
  float: right;
  clear: right;
}

<div class="wpr">
  <div>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div>
  <div>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type </div>
  <div>3 Lorem Ipsum is simply dummy when an unknown printer took a g </div>
  <div>4 Lorem Ipsum is simply dummy text of the printing </div>
  <div>5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem  </div>
</div>