html - 如何使用 flex 在父 div 中的 2 个兄弟 div 旁边设置 1 个 div？

Question

我正在尝试设置这样的布局:

但是使用下面的代码我只能正确设置前两个 div，但第三个不在 div.outer 中。如何使用 CSS flex 正确设置它？到目前为止，我用 float: left 做到了，但我想在 flexbox 中做到这一点。 如果我们将有超过 3 个 div.inner，则应该从左侧开始堆叠(如果右侧没有更多空间)

.outer {
   width: 100%;
   border: 2px solid black;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   height:500px;
 }

 .inner {
   width: 50%;
   border: 2px solid red;
   box-sizing: border-box;
   
 }

.inner:first-child {
  height:100%
}

.inner:nth-child(n+2) {
  height:50%;  
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

Answer 1

使用相同的标记，您可以将 margin-left: auto 添加到 third inner 和 translate它使用 transform: translate(-100%) 朝向顶部 - 请参见下面的演示:

.outer {
  width: 100%;
  border: 2px solid black;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  height: 500px;
}

.inner {
  width: 50%;
  border: 2px solid red;
  box-sizing: border-box;
}

.inner:first-child {
  height: 100%;
}

.inner:nth-child(n+2) {
  height: 50%;
}

.inner:last-child { /* ADDED */
  margin-left: auto;
  transform: translateY(-100%);
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>