Flexboxとは？

CoddyのHTMLジャーニー「Styling with 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> 要素があるHTMLドキュメントが与えられています。あなたのタスクは、display: flex; プロパティを使用して、親要素の <div> をフレックスコンテナにすることです。以下の手順に従ってください：

container クラスを持つ <div> 要素をターゲットにするCSSルールを記述してください。
.container 要素の display プロパティを flex に設定してください。

チートシート

フレックスコンテナを作成するには、displayプロパティをflexに設定します：

.container {
    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：交差軸に余白がある場合のフレックスラインの配置

自分で試してみよう

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