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

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

フレキシブルボックスを利用するために、親タグのdisplayプロパティを設定する必要があり、その値にはbox、flex、inline-flexがあるのですが、boxは古い書き方になります。
最新のブラウザを対象とするならば、flexを使いましょう（inline-flexは割愛します）。

sample

class[side]

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

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

html

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

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

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

css

.parent{
    display:-webkit-flex;
    display:flex;
}

.parent .side{
    width:25%;
}
.main{
    width:75%;
}

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

  • 親となるタグにdisplay:flexを設定（幅などは必要であれば、適宜設定）
  • 親タグ内の分割用の子タグ（親タグ直下の子タグ＝flexアイテム）に幅や背景など必要な設定をする（単純に横並びにするだけなら、フレキシブルボックス関係の設定は不要）

分割用の子タグの数が多くても、自動的に親タグの幅内に収まるように調整されます。
また、分割用の子タグの幅の合計が親タグの幅を超えたとしても、自動的に調整されるので、意図しない表示になる可能性があります。

display:flexを設定した親タグをflexコンテナといい、その直下の子タグ（分割用の子タグ）をflexアイテムっていうらしーですよ。

ここでは割愛していますが、flexのほかにinline-flexというものもあります。以下の関連プロパティとの組み合わせで、それぞれ表示に違いが出てくるようです。

sample＜その他の設定＞

class[flex_item1]

class[flex_item2]
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

class[flex_item3]

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

html

<div class="parent">
<div class="flex_item1">ここにコンテンツ</div>
<div class="flex_item2">ここにコンテンツ</div>
<div class="flex_item3">ここにコンテンツ</div>
</div>

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

上のサンプルの例では、親タグ（flexコンテナ）内に3つの分割用の子タグ（flexアイテム）を入れています。

css

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

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

    justify-content:center; /* flexコンテナ内のflexアイテムの横方向の配置を指定する・・・ここでは中央寄せに配置 */

    align-items:center; /* flexコンテナ内のflexアイテムの縦方向の揃え位置を指定する・・・ここでは中央寄せ */
}

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

    order:1; /* flexアイテムに並び順を設定（以下同様） */
}

.board_smp .parent .flex_item2{
    width:200px;
    background:#ffd;

    order:2;
}

.board_smp .parent .flex_item3{
    width:200px;
    background:#dff;

    order:0;
}

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

  • 親となるタグ（flexコンテナ）にdisplay:flexを設定
  • flexアイテムを水平方向（justify-content）・垂直方向（align-items）にどのように配置するか設定（ここではそれぞれ中央揃え）
  • flexアイテムに表示順（order）を設定

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

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

戻る

Top