Flex Boxとは？

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

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

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

.container {
    display: flex;
}

• display: flex;: この宣言により、選択した要素がFlexコンテナになり、その直接の子要素がFlexアイテムになります。
• display: inline-flex;: インラインFlexコンテナを作成します。この要素はインライン要素のように振る舞いますが、その子要素はFlexboxのすべての機能を備えた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と似ていますが、複数行を対象とします）。