flexの使い方

概要

横に並べたり、リストを逆から並べたり、
テーブルレイアウトにしたり、レスポンシブに動かしたり…etc

今まで float: left とか display: table とか色々駆使して作成していたものを、
display: flex を使用することにより、色々なレイアウトが楽になるCSSプロパティです。

基本

親要素に display: flex を記載します。
親要素がflexコンテナ
子要素がflexアイテムです。

基本的には親要素をメインに操作を行ないます。
表示する割合い等、細かい調整を子要素側で行ないます。

横並び

おなじみの横並びです。

<nav>
    <ul>
        <li>list 01</li>
        <li>list 02</li>
        <li>list 03</li>
        <li>list 04</li>
        <li>list 05</li>
    </ul>
</nav>

ul {
    display: flex;
}

/* 見やすいように調整 */
ul li {
    background: #be2c2c;
    color: #fff;
    text-align: center;
    margin: 10px;
    padding: 10px;
    width: 100px;
}

DEMO

もし、縦並びになってしまっている場合は、flex-direction: rowを指定すれば横並びになります。
次に他のプロパティを使って、並び方をカスタマイズしてみます。

各プロパティの説明

flex-direction

flexアイテムをどの方向で並べるかを指定します。

横方向

純粋に横に並べます。

ul {
    display: flex;
    flex-direction: row;
}

逆側から横に並べます。

ul {
    display: flex;
    flex-direction: row-reverse;
}

縦方向

純粋に縦に並べます。

ul {
    display: flex;
    flex-direction: column;
}

逆側から縦に並べます。

ul {
    display: flex;
    flex-direction: column-reverse;
}

justify-content

flexアイテムの横方向の整列を行ないます。
※flex-directionがcolumn、column-reverseの時は縦方向

横幅に合わせて等間隔に並べる

ul {
    display: flex;
    justify-content: space-between;
}

DEMO

横幅に合わせて等間隔に並べる その2

両端の外側にいい感じの余白を与えます。
※内側要素の間隔の半分の余白です。

ul {
    display: flex;
    justify-content: space-around;
}

DEMO

右寄せにする

ul {
    display: flex;
    justify-content: flex-end;
}

DEMO

中央寄せにする

ul {
    display: flex;
    justify-content: center;
}

DEMO

左寄せにする(規定値)

ul {
    display: flex;
    justify-content: flex-start;
}

DEMO

align-items

flexアイテムの縦方向の整列を行ないます。
※flex-directionがcolumn、column-reverseの時は横方向

下段に合わせる

ul {
    display: flex;
    align-items: flex-end;
}

DEMO

中央寄せにする

両端の外側にいい感じの余白を与えます。
※内側要素の間隔の半分の余白です。

ul {
    display: flex;
    align-items: center;
}

DEMO

上段に合わせる

ul {
    display: flex;
    align-items: flex-start;
}

DEMO

ベースラインに合わせる

ul {
    display: flex;
    align-items: baseline;
}

※厳密には相違がありますが、文字の下段に合わせると覚えると取りあえずはいいと思います。
DEMO

高さに合わせる(規定値)

ul {
    display: flex;
    align-items: stretch;
}

子要素で高さを指定している場合は、そちらが優先されます。
高さを指定していない子要素に対して、親要素(flexコンテナ)の高さが設定されます。
DEMO

align-self

flexアイテムに指定します。
指定したflexアイテムの縦方向の整列を行ないます。
個別に子要素の位置を変更したいときに便利です。
挙動はalign-itemsと同じです。

※サンプルは中央揃えをベースにしてます。
DEMO

align-contents

flexアイテムを並べた際、flexコンテナ内に余白がある場合にどのように並べるかを指定します。
flex-wrap(後述)が、wrapでカラム落ちさせる場合に使います。
値は下記、挙動は前述と同様です。

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

※サンプルでは、centerで設定してます。
DEMO

中身も全部flexで作る

先ほどの li 要素の部分で、
文字の中央揃えを

ul li {
    text-align: center;
    padding: 10px;
    width: 100px;
}

で調整しましたが、ここの部分も flexでやってみましょう。

ul {
    display: flex;
}

ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 100px;

    /* 任意の高さ */
    height: 36px;
}

これで先ほどの例と同じになります。
個人的には、幅と高さ両方共にcenter表記が出来るのは可読性がいいと思ってます。

flex-basis

flexアイテムに記載します。
widht, height と同じです。
flex-direction (後述)が、
flex-direction: row の場合は幅
flex-direction: column の場合は高さが変わります。

flex-grow

flexアイテムに記載します。
flexアイテムの伸縮率を設定します。
数字が大きいほど伸縮率が上がります。
子要素の列幅が違う時に使います。

flex-shrink

flexアイテムに記載します。
flexアイテムの短縮率を設定します。
数字が大きいほど小さくなります。

flex

flexアイテムに記載します。
上記、三つのプロパティを一括で指定できます。
順番は、flex-grow flex-shrink flex-basis です。
flex: 0 0 100px

flex-wrap

折り返しの設定が出来ます。

折り返しなし

ul {
    display: flex;
    flex-wrap: nowrap;
}

折り返し表示

ul {
    display: flex;
    flex-wrap: wrap;
}

逆から折り返し表示

ul {
    display: flex;
    flex-wrap: wrap-reverse;
}

flex-flow

flex-directionとflex-wrapをまとめて記載できます。

ul {
    display: flex;
    flex-flow: column wrap; /* 縦並びの折り返し有 */
}

order

flexアイテムの順番を設定する事が出来ます。
規定値は0
数値が小さい順から横なら左、縦なら上から並んでいきます。
同じ数値がある場合は、先に記載されている要素が優先されます。

1,3,5,2,4の順

ul li:nth-child(2) {order: 1;}
ul li:nth-child(4) {order: 2;}

DEMO

2,3,5,1,4の順

ul li:first-child {order: 2;}
ul li:nth-child(4) {order: 3;}
ul li:last-child {order: 1;}

DEMO

2,5,4,1,3の順

ul li:first-child {order: 3;}
ul li:nth-child(2) {order: 0;}
ul li:nth-child(3) {order: 4;}
ul li:nth-last-child(2) {order: 2;}
ul li:last-child {order: 1;}

DEMO