CSS3ボックスレイアウト調査
2013 年 5 月 9 日 by 山平CSS3で登場したボックスレイアウトは便利なのですが、ブラウザごとに対応がまちまちだったりベンダープレフィックスがついたりと面倒なので、調査した記録を残します。
FirefoxとGoogleChrome・SafariなどWebkit系についてはそれなりに分かってきた気がしますが、IEとOperaについては調査不十分です。
調査用ファイル(HTML)
これをいじって試行錯誤しながら挙動をチェックしました。
ブラウザごとの差異もファイル内に記載しています。
確認ブラウザはWindows版Firefox、GoogleChrome、IE10のみです（少なくてスミマセン）。
今回の調査内容は上の添付ファイルに全て詰まっていますが、調査中に残した記録から以下に記載しておきます。
参考サイト
CSS3関連で検索すると大抵上位にヒットする定番サイト。
2010年の情報なので、IEに関する記述がないのは残念ですが、分かりやすく図解されていてイメージがつかみやすいです。
Microsoftのドキュメントです。
こちらも図が分かりやすくて良い内容ですが、当然言及されているのはIEに関してのみ、なおかつIEのバージョンごとの差異については説明されていないので良く分かりません。
ベンダープレフィックスの違いメモ
細かい書き方は忘れがちなので、代表的なものだけですが、ここに残しておきます。
ボックス指定（display）
display: box; /* 標準 */
display: -moz-box; /* Firefox */
display: -webkit-box; /* Webkit系 */
display: -ms-flexbox; /* IE */
ボックスの横幅指定（sizing）
box-sizing: [content-box, border-box]; /* 標準 */
-moz-box-sizing: [content-box, border-box]; /* Firefox */
-webkit-box-sizing: [content-box, border-box]; /* Webkit系 */
-ms-box-sizing: [content-box, border-box]; /* IE */
ボックスの並び（olient）
box-orient: [horizontal, vertical]; /* 標準 */
-moz-box-orient: [horizontal, vertical]; /* Firefox */
-webkit-box-orient: [horizontal, vertical]; /* Webkit系 */
-ms-flex-direction: [row, column]; /* IE */
ボックスの揃え位置
box-align: center; /* 標準 */
-moz-box-align: center; /* Firefox */
-webkit-box-align: center; /* Webkit系 */
-ms-flex-align: center; /* IE */
ボックスの余白分配（pack）
box-pack: [center, end]; /* 標準 */
-moz-box-pack: [center, end]; /* Firefox */
-webkit-box-pack: [center, end]; /* Webkit系 */
-ms-flex-pack: [center, end]; /* IE */
ボックスの幅比率（flex）
box-flex: 1; /* 標準 */
-moz-box-flex: 1; /* Firefox */
-webkit-box-flex: 1; /* Webkit系 */
-ms-flex: 1; /* IE */
