css - 使用 flex 属性组织列

Question

http://jsfiddle.net/f8n9e/1/

<div class="row">
    <div class="col col-span-9" style="height:150px;">0</div>
    <div class="col col-span-3">1</div>
    <div class="col col-span-3">2</div>
    <div class="col col-span-3">3</div>
</div>

---

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

.col-span-3 {
  flex-basis: 25%;
}

.col-span-9 {
  flex-basis: 75%;
}

.col {
  background-color: #999999;
  background-clip: content-box;
  border: 1px solid rgba(0,0,0,0.1);
}

我有这段代码，但结果不是我想要的。我怎样才能实现这样的例子？我只对 css 属性感兴趣，没有新的 html 元素。

--------------------
|         |    1    |
|    0    |---------|
|         |    2    |
|         |---------|
|         |    3    |
--------------------

Answer 1

您要求的只能使用列方向来实现，这也需要指定的高度。

http://jsfiddle.net/f8n9e/2/

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 10em;
}

否则你将不得不添加一个额外的元素。此外，Firefox 根本不支持 Flexbox 的换行。