Flexbox 3 div，两列，一列两行答案

【问题标题】：Flexbox 3 divs, two columns, one with two rowsFlexbox 3 div，两列，一列两行
【发布时间】：2017-08-20 17:42:06
【问题描述】：

我正在尝试

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

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

我可以用浮动来做到这一点，比如

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

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

【问题讨论】：

如果可以在容器上设置一个固定的高度就很简单了。否则，不，这在 flexbox 中是不可能的。你需要一个丑陋的黑客。
解释见此帖：stackoverflow.com/q/34480760/3597276
或者可以嵌套..但是会有超过3个div。
@ZimSystem，是的，如果这是一个选项，那是一个很好的解决方案。只需将右侧的两个项目包装在一个容器中，该容器就成为左侧项目的兄弟。完成。
这里是一个浮动示例codepen.io/gc-nomade/pen/ZLKmLm 用于stackoverflow.com/questions/41797496/… 的答案（flex 和 grid 也是选项（对于 3 个兄弟姐妹）只有 grid 允许将高度放在一边......但不是真的但可用:(

标签： html css flexbox

【解决方案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>

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

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

【讨论】：

以及如何以有信誉的方式做表？
@Macilias 查看行跨度，用于需要跨越多行的列。其余的应该很简单。

【解决方案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;
}

【讨论】：

【解决方案3】：

使用flexbox 非常简单，你只需要一个容器来容纳这三个div 元素。

让我们用.box 类定义一个div，并添加div 元素。另外让我们为颜色添加三个类：.red、.green 和 .blue，以及两个处理列 left 和 right 的类。

<div class="box">
    <div class="left red"></div>
    <div class="right green"></div>
    <div class="right blue"></div>
</div>

现在我们将box 类定义为一个弹性框：

.box {
    display: flex;
    ...
}

然后我们定义方向为column（垂直），如果可以流动wrap：

.box {
    ...
    flex-flow: column wrap;
    ...
}

此外，我们可以定义div 元素的尺寸。 left 将是父 width 的 45% 和父 height 的 100%。

.left {
    width: 45%;
    height: 100%;
}

而right 将是父级width 的55% 和父级height 的50%（一半）。

.right {
    width: 55%;
    height: 50%;
}

完整示例：

.box {
  display: flex;
  flex-flow: column wrap;
  width: 400px;
  height: 100px;
}

.red {
  background: #cc092f;
}

.green {
  background: #09cc69;
}

.blue {
  background: #0980cc;
}

.left {
  width: 45%;
  height: 100%;
}

.right {
  width: 55%;
  height: 50%;
}

<div class="box">
  <div class="left red"></div>
  <div class="right green"></div>
  <div class="right blue"></div>
</div>

【讨论】：