Flex Boxとは？

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

CSSのFlexboxレイアウトは、コンテナー内の項目を整列させ、間隔を効率的に配分する強力なツールです。Flexboxを使うと、コンテナー内の要素の配置、方向、順序、サイズを制御でき、さまざまな画面サイズやデバイスに適応する柔軟で動的なレイアウトを作成できます。

Flexboxを使用するには、まずフレックスコンテナーを定義する必要があります。要素のdisplayプロパティをflexまたはinline-flexに設定します。フレックスコンテナーを作成すると、その直接の子要素は自動的にフレックスアイテムになります。

フレックスコンテナを作成する基本的な構文は次のとおりです。

.container {
    display: flex;
}

display: flex;: この宣言により、選択した要素がフレックスコンテナになり、その直下の子要素がフレックスアイテムになります。

フレックスコンテナーを作成したら、さまざまなFlexboxプロパティを使って、そのフレックスアイテムのレイアウトを制御できます。よく使われるプロパティには、次のようなものがあります。

flex-direction: フレックスアイテムの方向を指定します（row、column、row-reverse、column-reverse）。
justify-content: 主軸に沿ってフレックスアイテムを配置します（例: flex-start、flex-end、center、space-between、space-around）。

align-items: 交差軸に沿ってフレックスアイテムを配置します（例: flex-start、flex-end、center、baseline、stretch）。
flex-wrap: フレックスアイテムを複数行に折り返すかどうかを制御します（wrap、nowrap、wrap-reverse）。
align-content: 交差軸に余分なスペースがある場合に、フレックス行を配置します（justify-contentと似ていますが、複数行を対象とします）。

チャレンジ

簡単

3 つの子要素の div (<div>) を含む div (<div>) がある HTML ドキュメントが与えられます。display: flex; プロパティを使用して、親の div をフレックスコンテナーにするのがあなたの課題です。以下の手順に従ってください。

クラス container を持つ <div> 要素を対象とする CSS ルールを記述します。
.container 要素の display プロパティを flex に設定します。

自分で試してみよう

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>

腕試し

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

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

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