Flexboxとは？

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

CSSでは、Flexboxレイアウトは、container内のitemsを効率的にalignし、空間を配分する強力なツールです。Flexboxを使うと、container内の要素のalignment、direction、順序、サイズを制御でき、さまざまな画面サイズやデバイスに適応する柔軟で動的なレイアウトを作成できます。

Flexboxを使用するには、まず flex container を定義する必要があります。これは、要素の display プロパティを flex または inline-flex に設定することで行います。flex container を作成すると、その直接の子要素は自動的に flex items になります。

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

.container {
    display: flex;
}

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

flex コンテナーを用意したら、さまざまな Flexbox プロパティを使用して、その flex items のレイアウトを制御できます。最もよく使用されるプロパティには、次のようなものがあります。

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

align-items: 交差軸に沿って flex アイテムを整列します（例: flex-start、flex-end、center、baseline、stretch）。
flex-wrap: flex アイテムを複数の行に折り返すかどうかを制御します（wrap、nowrap、wrap-reverse）。
align-content: 交差軸に余分な空間がある場合に flex 行を整列します（複数の行を対象とする点を除き、justify-content と同様です）。

チャレンジ

簡単

3つの子要素の区分（<div>）を含む、HTMLドキュメントの区分（<div>）が与えられています。display: flex;プロパティを使用して、親の区分をflexコンテナに変えることがあなたの課題です。以下の手順に従ってください：

クラス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>