CSS3靈活的盒子模型和嵌套佈局

Question

我一直在玩CSS3靈活的盒子模型一點點這篇文章中描述：CSS 3 Flexible Box Model

我試圖創建一個簡單的VBOX有一個嵌套的hbox，這樣的事情：

<div class="vbox"> 
    <div>Header</div> 
    <div class="hbox"> 
     <div>Section 1</div> 
     <div>Section 2</div> 
     <div>Section 3</div> 
    </div> 
    <div>Footer</div> 
</div> 

但是，hbox的內容是垂直佈局而不是水平佈局的。我做錯了什麼，以及如何正確地做到這一點？謝謝。

Answer 1

問題是.hbox規則中的display: box;聲明被.vbox > *規則中的display: block;覆蓋。你有兩個選擇：

1使display: box覆蓋了更具體的規則：

.hbox { 
    display: -webkit-box !important; 
    -webkit-box-orient: horizontal; 
    -webkit-box-align: stretch; 
    display: -moz-box !important; 
    -moz-box-orient: horizontal; 
    -moz-box-align: stretch; 
    display: box !important; 
    box-orient: horizontal; 
    box-align: stretch; 
} 

Approach 1 working example here，這種方法的主要缺點是，你與CSS的默認規則的特殊性，其搞亂可能會在其他地方引起混淆。

2卸下display: block從更具體的規則：

.vbox > * { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 
} 

Approach 2 working example here，這種方法的主要缺點是，你需要的.hbox或.vbox所有直接孩子是塊級元素。