Flex Boxとは？

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

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

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

flexコンテナを作成する基本的な構文は次のとおりです：

.container {
    display: flex;
}

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

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

flex-direction：flex items の方向（row、column、row-reverse、column-reverse）を指定します。
justify-content：主軸に沿って flex items を配置します（例：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つの子要素のdivision（<div>）を含むdivision（<div>）を持つHTMLドキュメントが与えられています。あなたの課題は、display: flex;プロパティを使用して、親のdivisionを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>

腕試し

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

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

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