CSS3柔軟なボックスモデルとネストされたレイアウト

Question

この記事で説明したように、私はCSS3柔軟なボックスモデルと少しプレーしてきた

：私は、ネストされたのhboxと、このようなものをシンプルにvboxを作成しようとしていますCSS 3 Flexible Box Model

：

<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;宣言がルールのdisplay: block;によって上書きされるという問題があります。

1作るdisplay: boxオーバーライドより具体的なルール：あなたは、2つのオプションがあり

.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のすべての直接の子をする必要がありますということです。