Flexbox 3 div，两列，一列两行

Question

我正在尝试

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

三个连续的 div 并将其变成下面。其中红色是 div 1，绿色是 div 2，蓝色是 div 3。

我可以用花车来做到这一点，比如

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

但我似乎无法让它在 flexbox 中工作，这可能吗？

原文由 Steven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

合法的方法：

*推荐的

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

骇人听闻的方法：

*不推荐（我相信你会注意到原因）

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

原文由 UncaughtTypeError 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

稍微考虑一下，flexbox 是可以的。容器只需具有定义的高度（ % ， px 或 vh ）即可。

http://codeply.com/go/U1DCKAx85d

 body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh;
}

.a {
  flex: 0 0 100%;
  background: red;
}

.b, .c {
  flex: 0 0 50%;
  background: green;
}

.c {
  background: blue;
}

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议