css,javascript,actionscriptを中心に勉強したことをまとめるブログ

css3の勉強がてら、とても便利なプロパティ値「display:box;」を使っていたんですが、ブラウザによって挙動が違うみたいなので調べてみました。

display:box;とは

display:box;を指定することで、子要素がすべて横並びのボックスになります。
記述方法は、

<div class="box-wrapper">
        <div class="box-left"><p>左のボックス</p></div>
        <div class="box-center"><p>真ん中のボックス<br />二列目</p></div>
        <div class="box-right"><p>右のボックス</p></div>
</div>

div.box-wrapper {
    display:-webkit-box;
    display:-moz-box;
}

のようになります。
親要素のdisplay値をboxにします。
ただ、現在のブラウザ実装では各ベンダーのプリフィックスをつけなければいけませんので、

display:-webkit-box;
display:-moz-box;

のようにしておきます。（※便宜上以下全てdisplay:box;とします）
基本はこれだけです。

さて、この記述方法でいくつか作成してみました。

CSS3サンプル / display:boxについて

対応ブラウザは、

• Google Chrome
• Safari
• FireFox

なんですが、サンプルページを見てもらうと分かるとおりFireFoxでの挙動が他と違っています。

FireFoxでの挙動の違い

今のところ気づいたのが以下の点。

• display:box;を指定した要素の子要素は、width,heightの値にpaddingを含めてしまう。
• display:box;を指定した要素にmargin:0 auto;を使用した中央揃えが効かない。

というもの。
まだCSS3は先行実装なのでベンダー毎に違いが出てしまっているんでしょうか。

※ちなみに、子要素にwidth指定をしないとinlineのように中身の幅ぴったりになります。

「paddingを含めてしまう」の解決策：別要素にpaddingをつける

FireFoxではdisplay:box;を指定した要素の子要素はpaddingを含めてしまうので、さらに内側に要素がある場合はそちらにpaddingをつけてしまう。

<div class="box-wrapper">
        <div class="box-left"><p>左のボックス</p></div>
        <div class="box-center"><p>真ん中のボックス<br />二列目</p></div>
        <div class="box-right"><p>右のボックス</p></div>
</div>

div.box-wrapper {
    display:-webkit-box;
    display:-moz-box;
}

div.box-wrapper p {
    width:200px;
    padding:10px;
}

こうすれば一応できます。
（※この場合、widthの指定を内側の要素につける必要があるようです。）

しかし、必ず要素があるわけではないし、余計なタグを増やしてしまうのであまりよくないですね。

「paddingを含めてしまう」の解決策：FireFoxに合わせてしまう

もう一つはFireFoxに挙動を合わせてしまう方法。
CSS3にはwidth,heightにpaddingを含めるかどうかを指定する「box-sizing」があります。

[css]box-sizing:ボックスのwidth、heightに余白を含める

SafariやChrome側もpaddingを含ませるように指定することで共通の幅を指定できるようにします。

<div class="box-wrapper">
        <div class="box-left"><p>左のボックス</p></div>
        <div class="box-center"><p>真ん中のボックス<br />二列目</p></div>
        <div class="box-right"><p>右のボックス</p></div>
</div>

div.box-wrapper {
    display:-webkit-box;
    display:-moz-box;
}

div.box-left ,
div.box-center ,
div.box-right {
    -webkit-box-sizing:border-box; // webkit側を変更する
}

これで同一の幅指定でいけるようになります。
がしかし、下側のpaddingが機能しなくなってしまいました・・。んん・・。

「margin:0 auto;」での中央そろえ解決策：・・・なし

見つからずでした・・。

まとめ

というように、いろいろ試してみましたが、どれも完全に対応しているとは言いがたい結果になりました。
そもそもdisplay:box;というのは、

• box-ordinal-group // 要素の順番
• box-flex // 要素の幅の割合

等と併用してレイアウトの大枠を作るようなプロパティなんですよね。
なので、display:box;を指定した要素っていうのはあくまで枠だけということで。
枠には余計なものをつけずに位置と幅だけ指定すると。

そういう厳密な考えのもとに使っていけば、そこまでクセのあるプロパティでもないかと思いますね。
本来使うべき要素に使うべきプロパティだけ使うってことでしょうか。

参考サイト

※とここまで書いておきながら、この挙動については皆さん調べてあったんですね・・。

CSS3でのレイアウトで使えるbox系プロパティのまとめ - CSS Lecture
CSS3の数行で作る簡単な3カラムレイアウト - CSS-EBLOG
CSS3で新しいボックスレイアウト - VERSIONFIVE