justify-contentとjustify-items、align-contentとalign-itemsの違いを解説

こんにちは！
この記事ではCSSのフレックスボックスとグリッドシステムの魔法について掘り下げていきます。
キーワードは justify-content、justify-items、align-content、そしてalign-itemsの4つです。

それぞれの特性を理解してどんなレイアウトでも自由自在に操りましょう！

`justify-content` の大冒険

まずは justify-content からスタートしましょう。

justify-content は、フレックスボックスモデルにおける フレックスアイテムの水平方向 の配置を決定します。
対象となるのはフレックスコンテナです。

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

このコードではフレックスコンテナ（.container）に justify-content を設定しています。

値が space-between になっていますね。
これは「フレックスアイテム間のスペースを均等にしよう」というプロパティです。

`align-items` との出会い

次に align-items という新しい仲間を紹介します。

align-items は フレックスアイテムの垂直方向の配置 を決定します。
これもフレックスコンテナの中で活躍します。

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

コードを見てみると align-items の値が center になっています。
これは「フレックスアイテムを垂直方向の中央に配置しよう」というプロパティです。
比較的よく使われるものですね。

`justify-items` との対話

さて、次のキーワードは justify-items です。

justify-items は先程の２つとは違い、グリッドコンテナ内のグリッドアイテムの水平方向の配置 を決定します。

対象となるのはグリッドコンテナです。
ちなみに、フレックスボックスモデルでは通用しないので注意してくださいね。

.container {
    display: grid;
    justify-items: end;
}

このコードでは、グリッドアイテムがそのセルの右端（end）に配置されます。
これは「グリッドアイテムを水平方向の最終地点にしよう」というプロパティです。

`align-content` との共演

最後に align-content を見ていきましょう。

align-content は フレックスまたはグリッドコンテナの複数行間隔 を調整します。
こちらの対象はフレックスコンテナまたはグリッドコンテナです。

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

上記のコードでは align-content に space-around を指定していますね。
これは「行の間隔を等しくし、周囲の行に半分のスペースを追加しよう」というプロパティです。
行の間が美しく調整されて見た目も整います！

魔法の組み合わせ

それぞれのプロパティがどのように動作するか理解したらそれらを組み合わせてみましょう。

例えば以下のようにすればもっと強力になります！

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-around;
}

上記のコードでは justify-content がフレックスアイテムを水平方向に均等に配置し、align-items がそれらを垂直方向の中心に配置します。
そして flex-wrap と align-content が行間を美しく調整します。
これこそまさに魔法の力そのものです！

まとめ

以上が CSS の魔法のようなプロパティの justify-content、justify-items、align-content、align-items の解説となります。

各々のプロパティはそれぞれが持つ特性と力を理解して、それらを組み合わせることでさまざまなレイアウトを自由自在に操ることができます。

Gizanbeak