html – Flexbox 3 divs,两列,一列有两行

我想抓住

<div></div>
<div></div>
<div></div>

三个连续的div并将其转换为下方.其中红色为div 1,绿色为div 2,蓝色为div 3.

我可以用花车这样做

.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }

但我似乎无法让它在flexBox中运行,这可能吗？

解决方法

哈金方法：
*不推荐(我相信你会注意到为什么)

.flex-body {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: stretch;
    align-items: stretch;
    transform: rotate(90deg);
    max-width: 500px;
    margin: auto;
}

.flex-body div {
    border: 1px solid white;
    height: 300px;
    flex: 1 1 200px;
}

.flex-body div:last-of-type {
    flex: 1 1 300px;
    height: 300px;
}

<div class="flex-body">
  <div style="background: #0980cc;"></div>
  <div style="background: #09cc69;"></div>
  <div style="background: #cc092f;"></div>
</div>

合法方法：
*推荐的

.flex-row {
    flex-direction: row;
    display: flex;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-body {
    display: flex;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 300px;
}

<div class="flex-body">
  <div class="flex-row">
    <div style="background: #0980cc;"></div>
  </div>
  <div class="flex-column">
    <div style="background: #09cc69;"></div>
    <div style="background: #cc092f;"></div>
  </div>
</div>