【CSS】フレックスボックスで最後の行を左寄せにする方法

CSSのフレックスボックスは、アイテムを柔軟に配置することができる強力なツールです。その中でも justify-content プロパティを使用することで、アイテムの横方向の配置を制御することができます。例えば、justify-content: space-between; を指定すると、アイテムを均等に配置することが可能です。

しかし、アイテムの数がフレックスコンテナの幅に収まりきらない場合、最後の行に少ないアイテムが並ぶことがあります。その際、justify-content: space-between; の効果で最後の行のアイテムが左右に均等に配置されてしまい、不自然に見えることがあります。

この問題を解決するために、最後の行のみ左寄せにする方法を紹介します。

解決方法：auto マージンを利用する
解説
サンプル
まとめ

解決方法：auto マージンを利用する

フレックスボックスのアイテムに margin-right: auto; を適用することで、最後の行を左寄せにすることができます。この方法では、最後の行のアイテムがフレックスコンテナの左端に配置されます。

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

.flex-item {
    width: 30%;
    margin-bottom: 10px;
}

/* 最後の行のアイテムを左寄せにする */
.flex-item:last-child {
    margin-right: auto;
}

解説

.flex-container に display: flex; と flex-wrap: wrap; を設定して、アイテムがコンテナの幅を超えると次の行に折り返されるようにします。
justify-content: space-between; を指定することで、各行のアイテムが左右均等に配置されます。
最後の行のアイテムには margin-right: auto; を指定し、余白をアイテムの右側に作ることで、左寄せを実現しています。

サンプル

まとめ

justify-content: flex-start; を使用することでも、すべての行のアイテムを左寄せにすることができますが、今回のように「途中の行は均等配置、最後の行は左寄せ」といった柔軟な配置を行いたい場合には、margin-right: auto; の活用が有効です。

この方法を使用すれば、フレックスボックスの利便性を保ちながら、最後の行を自然な配置にすることができます。