メインコンテンツまでスキップ

Flex boxの使い方

補足

Gridレイアウトも各ブラウザにてサポートされましたので、そちらの利用も検討してください。

2カラムの場合​

justify-content: between;を使っても問題ありません。

3カラム以上の場合の問題​

3カラム以上の場合はjustify-content: between;は、下記の様にレイアウトに空きが生じてしまう事が発生してしまうため推奨していません。

BLANK

解決方法​

親の要素の左右のmarginに負の値を設定することで解決することが可能です。

.c-flex {
    // 左右のmarginに余白の半分の値の負の値を指定します
    margin: 0 -15px;

    &__col {
        height: 140px;

        // 左右のmarginに余白の半分の値を指定します
        margin: 0 15px;

        // widthに100%から1行に表示するカラム数で割り、余白の値を引いた値を指定します
        width: calc(100% / 3 - 30px);

        &:nth-child(n+4) {
            margin-top: 30px;
        }
    }
}