CSS入門 | CSS3拡張 | フレキシブルボックスレイアウト

フレキシブルボックス(flexible box)レイアウト

フレキシブルボックス(flexible box)はフレックスボックス(flex box)とも呼ばれ、CSS3で初めて紹介されたレイアウトモデルである。このレイアウトは、異なるサイズの画面やデバイスでもHTML要素が自動的に再配置され、Webページのレイアウトを常に同じように保てるようにする。

フレックスボックス(flex box)のために提供されるプロパティは次のとおりである。

また、フレックス要素(flex item)のために提供されるプロパティは次のとおりである。

CSS3フレックスボックス(flex box)の対応バージョン

CSS3フレックスボックス(flex box)に対応している主要Webブラウザーのバージョンは次のとおりである。ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

フレックスボックス(flex box)の概念

フレックスボックス(flex box)は、フレックスコンテナ(flex container)とフレックス要素(flex item)で構成される。

フレックスコンテナ(flex container)は、そのHTML要素のdisplayプロパティを設定することで定義できる。その要素をブロックタイプとして定義するにはdisplayプロパティ値をflexに、インラインタイプとして定義するにはinline-flexに設定する。フレックスコンテナは常に1つ以上のフレックス要素を含まなければならない。

フレックスコンテナの外部とフレックス要素の内部にあるすべてのものは通常どおり動作する。フレックスボックス(flex box)は、フレックス要素がフレックスコンテナの内部でどのように配置されるかだけを定義する。

フレックス要素は、フレックスコンテナ内でフレックスライン(flex line)という仮想の線に沿って配置される。基本的に1つのフレックスコンテナは、ただ1本のフレックスラインだけを持つ。

<style>
    #flex { display: -webkit-flex; display: flex; }
</style>

directionプロパティを利用すると、このフレックスライン(flex line)の方向を変えることもできる。directionプロパティ値がrtl(right-to-left)に設定されると、ページ内のすべてのテキスト要素は右から左方向に書かれる。同時にフレックスライン(flex line)の方向も変わり、フレックス要素の整列も右から左へ変わる。

<style>
    body { direction: rtl; }
    #flex { display: -webkit-flex; display: flex; }
</style>

flex-directionプロパティ

flex-directionプロパティは、フレックスコンテナ内でフレックス要素が配置される方向を設定する。このプロパティは次の値を持つことができる。

1. row : 既定値で、フレックス要素は左から右へ、そして上から下へ配置される。
2. row-reverse : directionプロパティ値がltr(left-to-right)の場合、フレックス要素は逆に右から左へ配置される。
3. column : 書字方向が水平の場合、フレックス要素は垂直方向に上から下へ配置される。
4. column-reverse : 書字方向が水平の場合、フレックス要素は垂直方向に下から上へ配置される。

<style>
    #row_reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
</style>

<style>
    #column { -webkit-flex-direction: column; flex-direction: column; }
    #column_reverse { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
</style>

justify-contentプロパティ

justify-contentプロパティは、フレックス要素の水平方向の整列方法を設定する。このプロパティは次の値を持つことができる。

1. flex-start : 既定値で、フレックス要素はフレックスコンテナの前方から配置される。
2. flex-end : フレックス要素はフレックスコンテナの後方から配置される。
3. center : フレックス要素はフレックスコンテナの中央から配置される。
4. space-between : フレックス要素は要素間だけに空き領域を置いて配置される。
5. space-around : フレックス要素は前、後ろ、そして要素間のすべてに空き領域を置いて配置される。

<style>
    #row_reverse { -webkit-justify-content: flex-end; justify-content: flex-end; }
</style>

<style>
    #center { -webkit-justify-content: center; justify-content: center; }
    #between { -webkit-justify-content: space-between; justify-content: space-between; }
    #around { -webkit-justify-content: space-around; justify-content: space-around; }
</style>

align-itemsプロパティ

align-itemsプロパティは、フレックス要素の垂直方向の整列方法を設定する。このプロパティは1行だけのフレックスボックスでは効果がなく、2行以上を持つフレックスボックスでのみ効果がある。このプロパティは次の値を持つことができる。

1. stretch : 既定値で、フレックス要素の高さがフレックスコンテナの高さと同じに変更された後、続けて配置される。
2. flex-start : フレックス要素はフレックスコンテナの上側に配置される。
3. flex-end : フレックス要素はフレックスコンテナの下側に配置される。
4. center : フレックス要素はフレックスコンテナの中央に配置される。
5. baseline : フレックス要素はフレックスコンテナの基準線(baseline)に配置される。

<style>
    #start { -webkit-align-items: flex-start; align-items: flex-start; }
    #center { -webkit-align-items: center; align-items: center; }
    #end { -webkit-align-items: flex-end; align-items: flex-end; }
</style>

<style>
    #stretch { -webkit-align-items: stretch; align-items: stretch; }
    #base { -webkit-align-items: baseline; align-items: baseline; }
</style>

flex-wrapプロパティ

flex-wrapプロパティは、フレックスラインに空き領域がなくなったとき、フレックス要素の位置を次の行へ送るかを設定する。このプロパティは次の値を持つことができる。

1. nowrap : 既定値で、フレックス要素は次の行へ移動しない。代わりにフレックス要素の幅を縮めて、1行にすべて配置する。
2. wrap : フレックス要素は空き領域がなければ次の行へ移動して配置される。
3. wrap-reverse : フレックス要素は空き領域がなければ次の行へ移動して配置される。ただし、下側ではなく上側へ移動する。

<style>
    #wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
    #wrap_reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
</style>

align-contentプロパティ

align-contentプロパティは、flex-wrapプロパティの動作を変更できる。このプロパティはalign-itemsプロパティと似た動作をするが、フレックス要素ではなくフレックスラインを整列する。このプロパティは次の値を持つことができる。

1. stretch : 既定値で、フレックスラインの高さが残りの空間をすべて占める。
2. flex-start : フレックスラインはフレックスコンテナの前方にまとまる。
3. flex-end : フレックスラインはフレックスコンテナの後方にまとまる。
4. center : フレックスラインはフレックスコンテナの中央にまとまる。
5. space-between : フレックスラインはフレックスコンテナに均等に分布する。
6. space-around : フレックスラインはフレックスコンテナに均等に分布する。ただし、両端に少し空間を残す。

<style>
    #space_between { -webkit-align-content: space-between; align-content: space-between; }
    #space_around { -webkit-align-content: space-around; align-content: space-around; }
</style>

<style>
    #flex_start { -webkit-align-content: flex-start; align-content: flex-start; }
    #center { -webkit-align-content: center; align-content: center; }
    #flex_end { -webkit-align-content: flex-end; align-content: flex-end; }
</style>

フレックス要素(flex item)のorderプロパティ

orderプロパティは、フレックスコンテナ内にあるフレックス要素の順序を設定する。

<style>
    #first { -webkit-order: -1; order: -1; }
</style>

フレックス要素(flex item)のmarginプロパティ

marginプロパティ値をautoに設定すると、水平方向の空き領域をなくすことができる。このプロパティを利用すると、フレックス要素を互いに反対方向へ押し出して配置できる。

<style>
    #first .item:nth-child(1) { margin-right: auto; }
    #second .item:nth-child(2) { margin-right: auto; }
</style>

また、marginプロパティを利用して、垂直方向と水平方向の中央揃えを簡単に設定することもできる。

<style>
    .item { width: 80px; height: 50px; margin: auto; }
</style>

フレックス要素(flex item)のalign-selfプロパティ

align-selfプロパティは、フレックスコンテナのalign-itemsプロパティより優先して適用される。このプロパティを利用すると、フレックス要素ごとに異なるalignプロパティ値を設定できる。

<style>
    .item:nth-child(2) { -webkit-align-self: flex-start; align-self: flex-start; }
    .item:nth-child(3) { -webkit-align-self: flex-end; align-self: flex-end; }
    .item:nth-child(4) { -webkit-align-self: center; align-self: center; }
    .item:nth-child(5) { -webkit-align-self: baseline; align-self: baseline; }
</style>

フレックス要素(flex item)のflexプロパティ

flexプロパティを利用すると、同じフレックスコンテナ内にあるフレックス要素の幅を相対的に設定できる。

次の例で、1番目のフレックス要素は全体幅の3/5を占め、残りの2つの要素はそれぞれ全体幅の1/5ずつを占める。

<style>
    .item:nth-child(1) { -webkit-flex: 3; flex: 3; }
    .item:nth-child(2) { -webkit-flex: 1; flex: 1; }
    .item:nth-child(3) { -webkit-flex: 1; flex: 1; }
</style>