Justify Content

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 46/76。

CSSにおいて、justify-contentプロパティは、フレックスコンテナの主軸に沿ってフレックスアイテムがどのように配置されるかを制御します。これは、アイテムを整列させ、余白がある場合にそのスペースを分配するのに役立ちます。このプロパティは、アイテムを水平方向（行）または垂直方向（列）に配置するのに便利で、レイアウトをより柔軟でレスポンシブなものにします。

justify-contentプロパティを使用するための基本構文は以下の通りです：

.container {
    display: flex;
    justify-content: value;
}

value: 主軸に沿ったフレックスアイテムの目的の配置。次のいずれかになります：

flex-start: これはデフォルト値です。アイテムは行の開始位置に向かって配置されます。

flex-end: アイテムは行の末尾に向かって配置されます。

center: アイテムは行の中央に配置されます。

space-between: アイテムは行に沿って均等に配置され、最初のアイテムは先頭に、最後のアイテムは末尾に配置されます。

space-around: アイテムは行に沿って均等に配置され、それぞれの周囲に同じ幅の余白が設けられます。

space-evenly: アイテム間の間隔（および両端までのスペース）がすべて等しくなるように配置されます。

例えば：

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

この例では、.container-start 要素はフレックスアイテムを主軸の開始位置に配置し、.container-center 要素はフレックスアイテムを主軸に沿って中央に配置します。

チャレンジ

簡単

2つの <div> 要素（親要素）があり、それぞれに3つの子要素（<div>）が含まれているHTMLドキュメントが与えられています。親要素には、すでに display: flex; が設定され、フレックスコンテナになっています。あなたのタスクは、justify-content プロパティを使用して、主軸に沿ってフレックスアイテムを整列させることです。以下の手順に従ってください：

fruits クラスを持つ <div> 要素をターゲットにするCSSルールを記述してください。
.fruits 要素の justify-content プロパティを center に設定し、フレックスアイテムを主軸の中央に配置してください。
vegetables クラスを持つ <div> 要素をターゲットにするCSSルールを記述してください。
.vegetables 要素の justify-content プロパティを space-between に設定し、フレックスアイテムを主軸に沿って均等に配置してください。

チートシート

justify-contentプロパティは、フレックスコンテナの主軸に沿ってフレックスアイテムをどのように配置するかを制御します：

.container {
    display: flex;
    justify-content: value;
}

利用可能な値：

flex-start: アイテムを先頭に寄せて配置します（デフォルト）
flex-end: アイテムを末尾に寄せて配置します
center: アイテムを中央に配置します
space-between: アイテムを均等に配置します。最初のアイテムは先頭に、最後のアイテムは末尾に配置されます
space-around: アイテムを均等に配置し、各アイテムの周りに同じスペースを空けます
space-evenly: 任意の2つのアイテム間のスペースが等しくなるように配置します

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

自分で試してみよう

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>