在webkit的flex-pack

Question

在網絡上存在關於CSS3的信息box,flexbox和flex。據我所知，flex現在是草案方法。因此，WebKit的，我們使用display: -webkit-flex，-webkit-flex: 1 auto ...

但我的問題是：我怎麼能在flex使用類似box-pack: start？

看一看this example（僅限webkit）。我需要將它打包到頂端，但它正在蔓延。它會類似於this hackish example（但不適合我的情況，很難維護）。我如何解決這個問題？

需要修復

HTML

<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，第二和第三.box會去線2，第4和第5 .box上線3和我需要該.body（比含量越大，在高度）對底部的空的空間。

hackish的解決方案:-(

HTML

<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

令狀後e all並在此創建示例，我在5秒後找到了解決方案。 Grrr ...

我可以簡單地在.body（W3 Flexbox - Align Content）上使用-webkit-align-content: flex-start。所以這是解決方案：

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

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

請參閱this working。