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

Question

我正在尝试设置如下布局：

但是使用下面的代码我只能正确设置前两个div，但是第三个div不在div.outer中。如何使用CSS flex正确设置此设置？到目前为止，我已经使用float: left做到了，但是我想在flexbox中做到这一点。 如果我们的内部空间大于3格，那么应该从左侧开始堆叠（如果右侧没有更多空间）

.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添加到第三 inner，并使用transform: translate(-100%)将其 translate 移至顶部-请参见下面的演示：

.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>

Answer 2

左右框的宽度相同，因此内部框应使用相同的内部。 然后在右边的内部再放两个内部，看这里。

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

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