[意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

  • あとで読みたい人は…

こんにちは、@cappeeです。

サイトを3カラムで作る場合は通常floatを使いますよね?

今回は意外と知らないCSS?かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。

display:box とは

displaybox1 300x151 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。

もうfloatのclearになんか悩まされることもありません。

display:box のすごいところは、横並びでレイアウトしたい要素の「親要素」にだけ記述すれば勝手に横並びにしてくれます。

プレフィックスを入れてもたった2行でできてしまうのです。

Flexible Box(フレキシブルボックス)とも言います。

display:box の記述方法

#contents の中に横並びにしたい要素を入れたとします。
下記の2行を追加すればもう横並びになっているはずです。ほんと一瞬ですね。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}

box-ordinal-group で順序変更

displaybox2 300x68 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-ordinal-group を指定すればHTMLの記述順に関係なく表示を入れ替えることができます。
下記のように記述すればHTML上#innerA→B→Cの順でも、表示はC→A→Bの順番になります。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
-webkit-box-ordinal-group: 2; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 2; /* Firefox用 */
}
#innerB{
-webkit-box-ordinal-group: 3; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 3; /* Firefox用 */
}
#innerC{
-webkit-box-ordinal-group: 1; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 1; /* Firefox用 */
}

box-flex で可変に

displaybox3 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-flex を指定すれば display:box で指定した横幅に合わせて伸縮してくれます。
display:boxを指定した要素にwidthを記述しないとFirefoxで横幅一杯に広がってくれませんのでご注意ください。

#contents{
width: 100%;
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
width: 350px;
}
#innerB{
-webkit-box-flex: 1; /* Safari,Google Chrome用 */
-moz-box-flex: 1; /* Firefox用 */
}
#innerC{
width: 350px;
}

display:box の活用

display:box は残念ながらIEでは対応していませんIE10からの対応となります。

ただし、仕様変更を繰り返しているようなのでまだPCサイトで使用するには注意が必要です。

[参考サイト]IE8から始めるテーブルレイアウト と IE10からのFlexible Box

活用方法としては、スマートフォンサイトの制作には display:box が大活躍してくれますよ。

横並びのメニューやタブの表示が一瞬でできてしまいます。

[2014.01.24]box-flexを使って可変に対応したい場合の指定に、Firefoxに関する補足を追記しました。

Pocket
article clipper [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>