CSSのflexで左寄せ＆両端を揃える！何個でも対応できる自動計算式

Gridを使えばいいじゃん……という点はひとまず置いておいて😅

CSSのflexを使って横並びにした要素を、親コンテナの両端にぴったり揃えつつ、左寄せする方法を解説します。

最初に結論として、以下の変数と計算式を使います。

See the Pen CSSのflexで両端をピッタリ揃える by MEMORUKA (@memoruka) on CodePen.

デモコード ※本筋に関係のないコードは省略

ul {
    --gap: 20px;
    --number: 3;
    --child-width: calc((100% - var(--gap) * (var(--number) - 1)) / var(--number));
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);

    & li {
        width: var(--child-width);
    }

}

変数の説明

• --number：1行内に並べたい要素の数
• --gap：要素同士の余白

この変数の値をデザインに応じて適宜調整してください。あとは自動で要素のサイズが計算されます。

要素が2つならjustify-content: space-between;でOK

本来、要素が2つの場合はjustify-content: space-between;を指定するだけで両端揃えは解決します。

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

しかし、3つ以上の要素を揃える場合は、別のテクニックが必要になります。

::afterを使う方法は限界がある

昔は::afterを使って擬似的に透明な要素を1つ追加し、3つ以上でもjustify-content: space-between;を適用する方法がよく使われていました。

しかし、この方法では::before(※order付与)と::afterを駆使しても、最大4要素までしか対応できません。

そのため、こうしたトリッキーな方法ではなく、calc()を使って正しく計算するのが理想的だと考えました。

calc()とCSS変数を使えば、ほぼ自動化できる

そこで、冒頭の結論に戻ります。

計算式自体は 「すべてのgap値を引いた残りの幅を、1行内の要素数で割る」 という単純なものです。これを実際の値で、いちいち手計算するのはメンドイので、変数とcalcを組み合わせて、CSSに勝手に計算させます。

--child-width: calc((100% - var(--gap) * (var(--number) - 1)) / var(--number));

式は固定なので、あとはデザインに合わせて--numberと--gapの変数の値を変更するだけでOKです。

これなら手動で計算する必要もなく、使い回しも簡単です。ぜひ活用してください。

現場からは以上です。