Flexの方向

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 45/76。

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

これは、justify-contentやalign-itemsなどのプロパティの動作にも影響します。flex-directionを正しく使うと、柔軟でレスポンシブなレイアウトを構築しやすくなります。

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

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

value: フレックスアイテムの希望する方向。以下のいずれかを指定できます。

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

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

column: フレックスアイテムは上から下へ、列に並べられます。主軸は垂直方向で、交差軸は水平方向です。

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

例:

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

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

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

チャレンジ

簡単

3つの子要素<div>をそれぞれ含む、2つの親<div>要素を持つHTML文書が与えられています。親の<div>要素は、すでにdisplay: flex;を使ってフレックスコンテナーに設定されています。あなたの課題は、flex-directionプロパティを使って、フレックスアイテムの配置を変更することです。

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

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

自分で試してみよう

<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>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

CSSによるスタイリングのすべてのレッスン

自分で練習してみよう: Webプレイグラウンド