flexbox（フレックスボックス）とは？
Flexbox (Flexible Box Layout) は、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できるようにする CSS レイアウト モジュールです。
フレックスボックスを使用すると、要素を水平または垂直に整列させ、柔軟な方法でそれらの間にスペースを分配できます。
Flexbox を使い始めるための基本的な概念とプロパティを説明していきいます。
flexbox（フレックスボックス）の使い方
コンテナー要素は、flex コンテナーを作成するために、display プロパティを “flex” に設定する必要があります。
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>flex-direction プロパティは、行 (デフォルト) または列 (“column” を使用) のいずれかで、フレックス項目の方向を設定します。
justify-content プロパティは、アイテムを主軸に沿って整列します (フレックス方向が行の場合は水平方向、フレックス方向が列の場合は垂直方向)。
align-items プロパティは、交差軸に沿ってアイテムを整列します (フレックス方向が行の場合は垂直方向、フレックス方向が列の場合は水平方向)。
[rml_read_more]
flex-wrap プロパティは、項目が 1 行に収まらない場合に複数の行に折り返すかどうかを設定します。
align-content プロパティは、複数の行がある場合に、交差軸に沿ってアイテムの行を揃えます。
flex-grow、flex-shrink、および flex-basis プロパティを使用して、flex アイテムのサイズと比率を制御できます。
まとめ
これにより、3 つのアイテムを含むフレックス コンテナーが作成され、各アイテム間にスペースを空けて水平方向に配置され、垂直方向に中央揃えされます。
Flexbox にはいくつかの制限とブラウザーの互換性の問題があるため、複雑なレイアウト構造にはグリッドやメディア クエリなどの他のレイアウト方法と共に使用します。
