这种布局是否可以通过flexbox实现？

Question

我一直在寻找灵活的例子并自己动手。我不认为这是可能的flexbox，但我想我会在放弃它之前检查。

布局可以在这里看到：

所有这三个元素都在同一个父div中，不幸的是我坚持使用这种HTML结构，所以我的选择是有限的。抱歉模糊的标题。我无法用文字清楚地表达布局。

感谢。

Answer 1

因为某种灵魂已经认为适合回答......这是我的版本......不需要额外的HTML。

Codepen Demo

.wrapper {
  width: 50%;
  margin: 25px auto;
  height: 300px;
  border: 1px solid grey;
  justify-content: space-between;
  align-content: space-between;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.box {
  width: 49.5%;
  background: #000;
}
.left {
  flex: 0 0 100%;
  /* equals height */
  background: lightblue;
}
.right.top {
  flex: 0 0 39%;
  /* equals height */
}
.right.bottom {
  flex: 0 0 39%;
  /* equals height */
}

<div class="wrapper">
  <div class="box left"></div>
  <div class="box right top"></div>
  <div class="box right bottom"></div>
</div>

Answer 2

当我试图学习弯曲自己的时候，我想我会试一试并提出以下内容（否则这个问题应该因为过于宽泛而被关闭）

＆＃13;

＆＃13;

.container {display:flex;}
.column {flex:1;}
.row {flex:1; background-color:black;}

#outer {flex-direction:row; height:250px;} /* height for example purpose only */
#left {background-color:black; margin-right:20px;}
#right {flex-direction:column;}
#top {margin-bottom:50px;}

＆＃13;

<div class="container" id="outer">
    <div class="column" id="left"></div>
    <div class="column container" id="right">
        <div class="row" id="top"></div>
        <div class="row" id="bottom"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;