Flex Direction

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

CSSにおいて、flex-directionプロパティはフレックスコンテナ内でのアイテムが配置される方向を制御します。アイテムを行（row）または列（column）のどちらに配置するかを決定します。

これは、justify-content や align-items のようなプロパティがどのように機能するかにも影響します。flex-direction を正しく使用することで、柔軟でレスポンシブなレイアウトを構築するのに役立ちます。

flex-directionプロパティを使用するための基本的な構文は次のとおりです。

.container {
    display: flex;
    flex-direction: value;
}

value: フレックスアイテムに設定したい方向。以下のいずれかを指定できます：

row: これはデフォルト値です。フレックスアイテムは左から右へ、行方向に配置されます。主軸は水平方向で、交差軸は垂直方向です。

row-reverse: フレックスアイテムは右から左へ、一行に配置されます。主軸は水平方向で、交差軸は垂直方向です。

column: Flexアイテムは上から下へ、列（カラム）状に配置されます。主軸は垂直方向で、交差軸は水平方向です。

column-reverse: フレックスアイテムは、下から上へ、列（カラム）状に配置されます。主軸は垂直方向で、交差軸は水平方向です。

例えば：

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

この例では、.container-row 要素はフレックスアイテムを左から右へ一列に表示し、.container-row-reverse 要素はそれらを右から左へ表示します。

チャレンジ

簡単

2つの親 <strong><div></strong> 要素があり、それぞれに3つの子 <strong><div></strong> 要素が含まれているHTMLドキュメントが与えられています。 親の <div> 要素は、すでに display: flex; を使用してフレックスコンテナとして設定されています。あなたのタスクは、flex-direction プロパティを使用してフレックスアイテムの配置を変更することです。

以下の手順に従ってください：

クラス container1 を持つ <div> 要素をターゲットにするCSSルールを記述します。
- フレックスアイテムを垂直方向の列に配置するために、その flex-direction プロパティを column に設定します。
クラス container2 を持つ <div> 要素をターゲットにするCSSルールを記述します。
- フレックスアイテムを逆順の列に配置するために、その flex-direction プロパティを column-reverse に設定します。

チートシート

flex-directionプロパティは、フレックスコンテナ内でアイテムが配置される方向を制御します：

.container {
    display: flex;
    flex-direction: value;
}

値：

row: デフォルト。アイテムは左から右に配置されます（水平方向の主軸）
row-reverse: アイテムは右から左に配置されます（水平方向の主軸）
column: アイテムは上から下に配置されます（垂直方向の主軸）
column-reverse: アイテムは下から上に配置されます（垂直方向の主軸）

.container-row {
    display: flex;
    flex-direction: row;
}

.container-column {
    display: flex;
    flex-direction: column;
}

自分で試してみよう

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>