CSS3のflexboxについて調べてみた(flexコンテナ編)

flexbox(CSS Flexible Box Layout Module)は、柔軟なボックスレイアウトを可能にするCSSの新しいレイアウトモードです。従来、横並びのレイアウトを組むためにfloatなどを駆使してレイアウトしていましたが、 このFlexboxを使うことで複雑なレイアウトを簡単に組むことができるようになります。

ざっくりですが、flexboxを使うと次のような良い点があります。

• CSSだけで横に並んだ要素の高さを揃えることができる。
• 上下左右の位置揃えが簡単にできる。
• 要素の並び順をHTMLの変更無しで変えられる。
• ボックス(カラム)の横幅を柔軟に指定できる。

flexboxの構成

flexboxは、flex-itemと呼ばれる子要素と、それを入れるためのflex-containerと呼ばれる親要素の2つから成ります。

flexboxを使うことで、コンテナの中にあるflex-itemを柔軟にレイアウトすることができます。

flex containerの作り方

要素をflex containerとして扱いたい場合、入れ物としたい要素(flex itemの親要素)のdisplayプロパティに「flex」を指定します。

.container {
    display: flex;
}

インライン要素に指定する場合は、次のように「inline-flex」と指定します。

.container {
    display: inline-flex;
}

上記指定により、指定された要素はflex containerとなり、その子要素は自動的にflex itemとなります。

ここからは、次のHTMLをベースにflexboxに指定可能な各プロパティについて確認していきます。

<div class="container">
    <div class="flex-item1"><p>Item1</p></div>
    <div class="flex-item2"><p>Item2</p></div>
    <div class="flex-item3"><p>Item3</p></div>
</div>

最初に「display: flex;」と指定しただけのイメージを確認します。

「display: flex;」のみを指定した場合、子要素は左詰めに配置され全ての高さが揃った状態でレイアウトされます。 高さが揃ているのは、初期値として「align-items: stretch;」となるためで、「align-items」については後で確認していきます。

flex itemの配置方向と順序を決めるflex-direction

flexコンテナには、水平方向(main axis)と垂直方向(cross axis)の2つの軸という考え方があります。 flex-directionで指定可能なレイアウトは、flex itemをどちらの軸に配置するのかとどの方向から順に配置するのかを指定することができます。

それでは、flex-directionの指定について確認して行きます。

flex-direction: row;

.container {
    display: flex;
    flex-direction: row;
}

flexアイテムは、水平方向に左から右へ配置されます。flex-directionを指定しない場合、初期値はrowとなります。

flex-direction: column;

.container {
    display: flex;
    flex-direction: column;
}

flexアイテムは、垂直方向に上から下へ配置されます。

flex-direction: row-reverse;

.container {
    display: flex;
    flex-direction: row-reverse;
}

flexアイテムは、水平方向に右から左へ配置されます。

flex-direction: column-reverse;

.container {
    display: flex;
    flex-direction: column-reverse;
}

flexアイテムは、垂直方向に下から上へ配置されます。

メモ

flexアイテムに何も指定していない場合、flexアイテムのサイズが揃うよう調整され配置されます。 例えば、flex-direction: rowが指定された場合、flexアイテムの高さが同じになるよう最も大きいflexアイテムの大きさに揃えられます。 また、flex-direction: columnが指定された場合、flexコンテナの幅に収まるよう横方向に伸ばされ揃えられます。

flexコンテナ中のflexアイテムを1行に収めるか複数行に収めるかを決定する【flex-wrap】

幅800pxのflexコンテナと幅300pxのflexアイテムを用意したとします。この状態でflex-wrapがどのように影響するかを確認していきます。

flexコンテナにflex-wrapを指定しない場合(初期値)、flexアイテムが1行に収まるようにflexアイテムが縮小されます。

flex-wrap: nowrap;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

flex-wrapにnowrapを指定した場合も同様にflexアイテムが縮小されます。

flex-wrap: wrap;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

flexコンテナの幅に収まりきらないflexアイテムは2行目に配置され複数行に渡ったレイアウトになります。

flex-wrap: wrap-reverse;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

wrap-reverseが指定された場合、flexアイテムは下から上に向かって左から配置されます。

flexアイテムを交差軸に沿ってどうレイアウトするかを決める【align-items】

flex-directionで決めた主軸に対して交差する軸にflexアイテムをどう配置するかを決定します。

align-items: stretch;

.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

「flex-direction: row」と指定しているため、flexアイテムは水平方向に配置されます。主軸が水平方向となるため交差する 垂直方向の軸に対してflexコンテナいっぱいに収まるよう伸びた状態でflexアイテムが配置されます。

align-items: flex-start;

.container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

主軸が水平方向となるため交差する垂直方向の軸のスタート位置を基準にflexアイテムが配置されます。

「flex-direction」がcolumnだった場合、主軸が垂直方向となるため交差する水平方向の軸のスタート位置を基準にflexアイテムが配置されます。

align-items: flex-end;

.container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

主軸が水平方向となるため交差する垂直方向の軸の終わりを基準にflexアイテムが配置されます。

align-items: center;

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

主軸が水平方向の場合、交差する垂直軸の中央を基準にflexアイテムが配置されます。

align-items: baseline;

.container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

すべてのflexアイテムは、ベースラインが一直線になるように配置されます。

flexアイテムを主軸に沿ってどうレイアウトするかを決める【justify-content】

flex-directionで決めた主軸上にflexアイテムをどのように配置するかを決定します。

justify-content: flex-start;

.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

「flex-direction: row」と指定しているため、flexアイテムは水平方向(主軸)に配置されます。主軸のスタートとなる左から flexアイテムが配置されます。

justify-content: flex-end;

.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

主軸の終わりとなる右からflexアイテムが配置されます。

justify-content: center;

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

flexアイテムはflexコンテナの中央に配置されます。

justify-content: space-between;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

主軸の初めと終わりにあるflexアイテムは端に配置され、残りのflexアイテムは等間隔で配置されます。

justify-content: space-around;

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

flexアイテムは全て等間隔で配置されます。

複数行のflexアイテムを交差軸に沿ってどうレイアウトするかを決める【align-content】

このプロパティは、flexアイテムを交差軸上にどのように配置するかを決定します。flexコンテナが複数行のflexアイテムを持つ場合のみ効果があり、 flexアイテムが一行の場合は、レイアウトに影響を与えません。

align-content: flex-start;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    width:800px;
    height:500px;
}

flexアイテムはflexコンテナの交差軸の始まり方向に詰めた状態で配置されます。

align-content: flex-end;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    width:800px;
    height:500px;
}

flexアイテムはflexコンテナの交差軸の終わり方向に詰めた状態で配置されます。

align-content: center;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    width:800px;
    height:500px;
}

flexアイテムはflexコンテナの交差軸方向の中心に配置されます。

align-content: space-between;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    width:800px;
    height:500px;
}

flexアイテムはflexコンテナの交差軸の始点と終点に（上端と下端に）張り付くように配置され、残りのflexアイテムは等間隔で配置されます。

この例では、等間隔がわかりやすいよう要素を2つ追加しています。

align-content: space-around;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    width:800px;
    height:500px;
}

flexアイテムは交差軸の方向に全て等間隔で配置されます。

「flex-direction」と「flex-wrap」を設定するショートハンド

「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。

flex-flow: 【flex-direction】 【flex-wrap】;

指定できる値は各プロパティと同様です。値は半角スペースで区切って、任意の順序で指定できます。省略した場合は各プロパティの初期値が指定されます。