CSS3でdisplay:boxを使う

えっと、HTML5＋CSS3で新規ページを作り始めたわけですが、いろいろはまった上に後で忘れそうなので【メモ】残します。

まず、(X)HTML5+CSS3での3カラムデザインを行うためにdisplay:box;を使おうとしているわけですが、以下コード。

<div id="container">
  <section data-role="content" id="contents">
    <h2>main_content</h2>
    <article>
      <p>main</p>
    </article>
  </section>
  <nav id="sidebar_left">
    <h3>sidebar_left</h3>
    <ul>
      <li>menu_1</li>
      <li>menu_2</li>
      <li>menu_3</li>
    </ul>
  </nav>
  <nav id="sidebar_right">
    <h3>sidebar_right</h3>
    <ul>
      <li>menu_1</li>
      <li>menu_2</li>
      <li>menu_3</li>
    </ul>
  </nav>
</div><!-- END div#container -->

このコードでCSSを記述して3カラムを作ります。次にCSSコード。

#container {
　　width:100%;
　　display:box;
　　display:-moz-box;
　　display:-webkit-box;
　　display:-ms-box;
}

#sidebar_left {
　　width:18%;
　　box-ordinal-group:1;
　　-moz-box-ordinal-group:1;
　　-webkit-box-ordinal-group:1;
　　-ms-box-ordinal-group:1;
　　background-color:#CF6;
}

#contents {
　　width:64%;
　　box-ordinal-group:2;
　　-moz-box-ordinal-group:2;
　　-webkit-box-ordinal-group:2;
　　-ms-box-ordinal-group:2;
　　-webkit-box-sizing:border-box;
　　background-color:#FFF;
　　padding:5px;
}

#sidebar_right {
　　width:18%;
　　box-ordinal-group:3;
　　-moz-box-ordinal-group:3;
　　-webkit-box-ordinal-group:3;
　　-ms-box-ordinal-group:3;
　　background-color:#9999FF;
}

これはCSS3のdisplay:boxを使って、ソース上ではコンテンツが先でサイドバーがあとに記述されているような状況でも、box-ordinal-groupで順番を変更して表示してしまいましょうという方法です。

Chromeでは普通に表示できるんですけどね。Firefoxでdisplay:boxを使用し、かつ子要素の幅を％（パーセント）で指定すると幅がなくなっちゃいます。
なぜ％（パーセント）指定したいかというと、@media screen and (max-width: 1000px)  なんてやってリキッドデザインを目指すとどうしても必要になっちゃうんですね。

そこで、Firefox用にCSSを少し足します。

#sidebar_left {
　　-moz-box-flex:1;
}

#contents {
　　-moz-box-flex:1;
　　max-width:640px;
}

#sidebar_right {
　　-moz-box-flex:1;
}

-moz-box-flexで幅を均等にした上でmax-width:640pxで想定している最大の幅を指定しました。（当方の場合、最大幅1000pxでサイドバーの最大幅を180pxとしているため）

最初はFirefoxでcontentsに入力していたダミーの文字が折り返されずに表示されてしまったためにデザインが崩れてしまっていました。上記-moz-box-flexで相対幅をしていするとなぜか直ったのでこれを利用しています。％（パーセント）指定が効かないのはなぜなのかわかりません。。。