フレキシブルレイアウト（フレキシブルボックス）：旧 [CSS3]

類似のレイアウトとしては、floatを使った分割レイアウトがあるのですが、float解除が必要だったり、分割部分にそれぞれ背景を入れていた場合、高さが異なると段々ができて美しくなかったりする問題がありました。
css3では、フレキシブルボックスを使って簡単に分割レイアウトを実現できます。

フレキシブルボックスを利用するために、親タグのdisplayプロパティを設定する必要があり、その値にはbox、flex、inline-flexがあるのですが、boxは古い書き方になります。
古いバージョンのブラウザも対象とするならば、boxも視野に入れましょう（とくにandroid4.3以前やiOS6.1以前の端末も対象とする場合）。

sample

class[side]

class[main]
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

IEなど未対応のブラウザでは横並びに表示されません。

html

<div class="parent">
<div class="side">ここにコンテンツ</div>
<div class="main">ここにコンテンツ</div>
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  • 親となるタグを用意（classやidは適宜設定）
  • 親タグ内に分割用の子タグ（親タグ直下の子タグ）を用意（classやidは適宜設定）・・・分割用の子タグの数はいくつでもよい

分割用の子タグの数は決まっていませんが、特に設定しないと、親タグの幅を超えて横並びになるので注意してください。

css

.parent{
    display:-moz-box;
    display:-webkit-box;
    display:-o-box;
    display:-ms-box;
    display:box;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  • 親となるタグにdisplay:boxを設定（幅などは特に設定しなくても良い）
  • 親タグ内の分割用の子タグ（親タグ直下の子タグ）に幅や背景など必要な設定をする（単純に横並びにするだけなら、フレキシブルボックス関係の設定は不要）

特に設定しないと、親タグの幅を設定していても、親タグの幅を超えて横並びしていくので、分割用の子タグの数や幅の設定に注意してください。

sample＜その他の設定＞

class[box1]

class[box2]
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

class[box3]

display:boxは何も設定しなくてもデフォルトで横並びになりますが、例えば、縦並びに変更したいときはbox-orientプロパティをverticalにすることで、変更することが可能です。
このようにフレキシブルボックス関係のプロパティをつかって、様々な設定ができます。
詳しくは下の方にある参考ページを参照してください。

html

<div class="parent">
<div class="box1">ここにコンテンツ</div>
<div class="box2">ここにコンテンツ</div>
<div class="box3">ここにコンテンツ</div>
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

上のサンプルの例では、親タグ内に3つの分割用の子タグを入れています。

css

.parent{
  background:#ccc; /* わかりやすいように親タグに背景色設定。不要であれば設定しなくてよい */
    width:100%; /* 親タグの範囲がわかりやすいように幅も設定。不要であれば設定しなくてよい */

    display:-moz-box;
    display:-webkit-box;
    display:-o-box;
    display:-ms-box;
    display:box; /* フレキシブルボックスを使う */

    -moz-box-pack:center;
    -webkit-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center;
    -box-pack:center; /* ボックス内の子要素の横方向の配置を指定する・・・ここでは中央寄せに配置 */

    -moz-box-align:center;
    -webkit-box-align:center;
    -o-box-align:center;
    -ms-box-align:center;
    box-align:center; /* ボックス内の子要素の縦方向の揃え位置を指定する・・・ここでは中央寄せ */
}

.parent .box1{
    width:200px;
    background:#fdf; /* わかりやすいように幅や背景色を設定。不要であれば設定しなくてよい（以下同様） */

    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -o-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    box-ordinal-group: 2; /* ボックス内の子要素に並び順を設定（以下同様） */
}

.parent .box2{
    width:200px;
    background:#ffd;

    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    -o-box-ordinal-group: 3;
    -ms-box-ordinal-group: 3;
    box-ordinal-group: 3;
}

.parent .box3{
    width:200px;
    background:#dff;

    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    -o-box-ordinal-group: 1;
    -ms-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  • 親となるタグにdisplay:boxを設定
  • 親となるタグに分割用の子タグが水平方向（box-pack）・垂直方向（box-align）にどのように配置するか設定（ここではそれぞれ中央揃え）
  • 分割用の子タグに表示順（box-ordinal-group）を設定

分割レイアウトも簡単にできますが、今まで難しかったボックス内の縦方向中央寄せがこのように簡単にできてしまいます。

display:boxのみの設定の時は、子タグの背景は自動的に縦方向は親タグの高さいっぱいに表示されましたが、box-alignを設定すると子タグの実際の高さまでになります。

戻る

Top