Flexbox跨越一排

Question

我是Flex盒子的新手。我想过创建一个这样的结构

我尝试创建此内容，但最后<div> d始终位于不同的行

http://codepen.io/srajagop/pen/wzyNVL

    body {
  margin: 0;
}

.foo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-flex-direction: row;

  height: 400px;
}

.a, .d {
  flex: 0 0 50%;
  background: green;
  height: 200px;
}

.b,.c {
  flex: 0 0 25%;
  height: 400px;
  background: blue;}

.c {
  background: red;}

.d {
  background: grey;
}

如何解决这个问题？

Answer 1

使用margin-top属性。似乎工作。

body {
  margin: 0;
}
.foo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-flex-direction: row;
  height: 400px;
}
.a,
.d {
  flex: 0 0 50%;
  background: green;
  height: 200px;
}
.b,
.c {
  flex: 0 0 25%;
  height: 400px;
  background: blue;
}
.c {
  background: red;
}
.d {
  background: grey;
  margin-top: -200px;
}

<div class="foo">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
</div>

Answer 2

我不会像上面的答案那样添加一个保证金顶级属性。你真正需要的是一个嵌套的flex容器，你有一个围绕所有项目的行flex容器，然后是一个围绕a和b的列flex容器。这是一个通常概述这个想法的片段：

.row,
.col {
  display: flex;
}

.row {
  flex-direction: row;
  height: 400px;
}

.col {
  flex: 0 0 50%;
  flex-direction: column;
}

.a,
.b {
  flex: 0 0 50%;
}

.a {
  background-color: green;
}

.b {
  background-color: red;
}

.c,
.d {
  flex: 0 0 25%;
}

.c {
  background-color: blue;
}

.d {
  background-color: yellow;
}

<div class="row">
  <div class="col">
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="c"></div>
  <div class="d"></div>
</div>