flex pack at webkit

Question

网络上有关于CSS3 box、flexbox和flex的信息。据我所知，目前flex是当前的草案方法。所以在webkit上我们使用display: -webkit-flex，-webkit-flex: 1 auto.

但我的问题是:我如何在flex上使用像flex这样的东西？

查看this example (仅限于webkit)。我需要把它打包到顶部，但它正在扩散。它将类似于this hackish example (但对我的情况不好，很难维护)。我怎么才能解决这个问题？

需要修复

<div class="body">
    <h1>Test</h1>
    <div class="box" style="width: 80%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <!-- (NEED TO FIX) EMPTY SPACE -->
</div>

CSS

h1 {
    -webkit-flex: 1 100%;
}

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;
}

所以请注意，h1需要使用从第1行、第2行和第3行到第3行的第2、第4和第5行的所有空间，我需要.body (在高度上大于内容)在底部有一个空空间。

黑客解决方案:-(

<div class="body">
    <h1 style="height: 40px;">Test</h1>
    <div class="box" style="width: 80%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="hackish"></div>
    <!-- NOTE THIS .hackish :-( -->
</div>

CSS

.hackish {
    width: 100%;
    height: 100%;
}

有什么解决办法吗？

Answer 1

在编写完所有的示例并创建到这里之后，我在5秒后找到了解决方案。Grrr..。

我可以简单地使用-webkit-align-content: flex-start on .body (http://www.w3.org/TR/css3-flexbox/#align-content)。所以这就是解决办法：

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;

    -webkit-align-content: flex-start;
}

见this working。