CSS3 の display:box; を使ったフレキシブルな段組みレイアウト

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

CSS3 から追加された display:box; を使うことで非常に簡単かつ安全, 柔軟な段組レイアウトを実現することができるようになりました. 今回はその使いかたについてまとめました.

FireFox のうんこ仕様への対応についても書いています.

float:left; で回り込みさせて, clear:both; で回り込みをクリア. なんて古臭い手法とは今日で訣別しましょう♪♪

flexible-box

View Demo Download

サンプル

すべて display:box; を使って段組みした例です. HTML を変えずに, CSS だけで完結している所がキモです.

display:box; によるフレキシブルレイアウトのメリット・デメリット

メリット

  • 固定幅かリキットかの切り替えが簡単
  • 並びを簡単に変えられる. (CSS の修正で完結する)
  • そこだけで完結する. (float の後の clear のし忘れといったことがない)

デメリット

  • IE系が未対応(どうやらグリッドレイアウト的なものを推しているようだ.)

サンプルの解説

テキストやボックスに影がついていたり, 角丸だったりとムダに着飾っておりますが, この辺は今回関係ないのでノータッチでいきます.

まずはベースとなる段組している要素です. これはどの例もほとんど共通です.

<div class="fix-wrap">
    <div class="box main">Main</div>
    <div class="box sub00">Sub00</div>
    <div class="box sub01">Sub01</div>
</div>

普通に表示

何も指定していないので縦に並んでしまいます.

display:box; を指定して横並び

display:box; を指定すると横に並んでくれます. display に対しての box 指定はまだ草案段階?なのでベンダープレフィックスをつける必要がある点だけ気をつけてください.

#sample01 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
}

全体を中央揃え

margin: 0px auto; によるセンタリング. FireFox だと何故かセンタリングされません. どうやらdisplay:box; が指定してあると効かなくなるようです.

#sample02 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
    
    margin: 0px auto;
}

全体を中央揃え(FireFox対策)

センタリング用の要素で囲うしかないようです… この場合 HTML も修正する必要があります.

<div>
    <div class="fix-wrap">
        <div class="box main">Main</div>
        <div class="box sub00">Sub00</div>
        <div class="box sub01">Sub01</div>
    </div>
</div>
#sample03>div {
    margin: 0px auto;
    width: 1200px;
}
#sample03 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
}

中身を中央揃え

box-pack: center; で中身が良い感じに中央に寄ってくれます

#sample04 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}

中身を左寄せ

box-pack: end; で右寄せ

#sample05 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
}

中身を右寄せ

box-pack: start; で左寄せ

#sample06 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    box-pack: end;
}

並び替え part1

display:box; を指定している要素の子供に, box-oridinal-group: index; 指定で順番を並び替えることができます.

Sub00 – Main – Sub01

#sample07 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
}
#sample07 .main {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -o-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
#sample07 .sub00 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -o-box-ordinal-group: 1;
    box-ordinal-group: 1;
}
#sample07 .sub01 {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -o-box-ordinal-group: 3;
    box-ordinal-group: 3;
}

並び替え part2

Sub01 – Sub00 – Main

#sample08 .fix-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
}
#sample08 .main {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -o-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
#sample08 .sub00 {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -o-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
#sample08 .sub01 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -o-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

リキッドデザイン

Main ボックスがウィンドウ幅に合わせて可変します.

box-flex: 数値(float); で可変長指定できます.

今回は main ボックスのみに指定しているので main だけがウィンドウ幅に合わせて伸び縮みします.

<div class="liquid-wrap">
    <div class="box main">Main</div>
    <div class="box sub00">Sub00</div>
    <div class="box sub01">Sub01</div>
</div>
#sample09 .liquid-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
}
#sample09 .main {
    -webkit-box-flex: 1.0;
    -moz-box-flex: 1.0;
    box-flex: 1.0;
}

Firefox の実装による問題

display:box; を使っていると必ずぶち当たるのが FireFox への対応です. なんだか, FireFox の display:box; の対応が変なんです.

ざっくりこちらで把握しているものだけでも

  • display:box; を指定した要素の子供は border, padding が幅高さに含まれるようになる.
  • display:box; を指定した要素は margin: 0px auto; によるセンタリングが効かなくなる.
  • 子供に display:box; を指定しても効く

といった感じ. 条件によってはまだまだたくさんあると思います.

border, padding が幅高さに含まれる問題

これは, 私の場合いつも最初に全ての要素に対して box-sizing: border-box; を指定しているため, さほど問題ではありませんでした.どうしても含めたくない場合は, 余分な要素で囲うのが無難な対策かなと思います.

margin: 0px auto; によるセンタリングが効かなくなる

これに関しても, border のときと同様センタリング用の要素で囲うのが対応方法としては簡単です. ただ, 中身をセンタリングしたいだけの場合は display:box; を指定した要素の幅を 100% にして, box-pack:center; と指定することで 余計な要素を作らずに似たようなことは実現できます.

子供に display:box; を指定しても効く

これはもうバグな気がする. こうするメリットが見当たらない. まぁ CSS3 はまだまだ策定段階なので長い目で見守りましょう. おそらくこればっかりは FireFox が webkit の実装に合わせてくれるはず…

調べてみると, FireFox への対応で悩んでおられる方が結構いる. まぁもっと普及してくれば統一されるはずなのでもう少しの辛抱です!!

グラデーション指定は Safari だけ違うんだよなぁ~. 色々と面倒な時代ですわ.

次回は HTML5 と CSS3 を使ったサイトを header -> contents -> footer と順を追って作る流れをまとめようと思います. ついでに WordPress のテーマ化についても♪♪

参考サイト

TRACK BACK URL

POST COMMENT

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

COMMENT