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

2023.05.22 に公開記事は 4 分で読めます
サムネイル画像

こんにちは!
この記事ではCSSのフレックスボックスとグリッドシステムの魔法について掘り下げていきます。
キーワードは justify-contentjustify-itemsalign-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 は先程の2つとは違い、グリッドコンテナ内のグリッドアイテムの水平方向の配置 を決定します。

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

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

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

align-content との共演

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

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

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

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

魔法の組み合わせ

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

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

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

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

まとめ

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

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


SHARE