CSS フレキシブルボックスレイアウト

CSSフレキシブルボックスレイアウト（通称フレックスボックス）^[2]は、 CSSウェブレイアウトモデルです。 ^[4] W3Cの候補勧告（CR）段階にあります。 ^[2]フレックスレイアウトにより、コンテナ内のレスポンシブな要素をビューポート（デバイス画面）のサイズに応じて自動的に配置することができます。

ほとんどのWeb ページは、 HTML (ハイパーテキスト マークアップ言語)、Javascript、CSS (カスケーディング スタイル シート)の組み合わせで記述されています。 簡単に言うと、HTML はページのコンテンツと論理構造を指定し、CSS はページの外観、つまり色、フォント、書式、レイアウト、スタイルを指定します。

CSS フレックスボックス レイアウトは、HTML ページのレイアウトを指定するための特別な方法です。

フレックス レイアウトの最も特徴的な機能の 1 つは、表示環境に基づいてフォームにフィットする機能です。フレックス ボックスのサイズは調整可能で、スペースを不必要に独占しないようにサイズを小さくしたり、境界内にコンテンツが収まるようにサイズを大きくしたりできます。さらに、フレックス レイアウトは、一般的に一方向である他の CSS レイアウト モデルよりもコンテンツ フローの点で制限が少なくなっています。フレックスの方向フローは、右、左、上、または下に指定できます。フレックス コンテナー内の個々のアイテムは、利用可能なレイアウト スペースに合わせて自動的に再配置することもできます。^[3]

2000年代後半以降、モバイルエージェントによるWebの集中的な使用により、「リキッドレイアウト」や、多様化する画面サイズに対応したレスポンシブ要素が生まれました。^{[5] 2010年代には、} Bootstrapなどの人気のJavaScriptレイアウトフレームワーク の集中的な使用が、CSSフレックスボックスやグリッドレイアウトの仕様に影響を与えました。^[6]

^{CSSモジュールには、Flexbox [2]}やgrid ^[7]のようなこれに似たソリューションが含まれていました。Flexboxはもともと、 Firefoxで使用されているMozillaのユーザーインターフェイスツールキットであるXULで利用可能な同様の機能に基づいています。^{[8] [9]}

2022年12月現在^{[アップデート]}、インストールされているブラウザの99.68%（デスクトップブラウザの99.59%、モバイルブラウザの100%）がCSSフレキシブルボックスレイアウトをサポートしています。^[10]

次の用語は、フレックスボックス レイアウト モデルに関連付けられています。

フレックスコンテナ

すべての flex アイテムを保持する親要素。CSS の display プロパティを使用して、コンテナーを flex または inline-flex として定義できます。

フレックスアイテム

フレックス コンテナー内に保持される直接の子要素はすべてフレックス アイテムとみなされます。コンテナー要素内のテキストはすべて不明なフレックス アイテムで囲まれます。

斧

各フレックス ボックスには、主軸と交差軸の 2 つの軸が含まれます。主軸は、アイテムが互いに整列する軸です。交差軸は、主軸に垂直です。

フレックス方向

主軸を確立します。使用可能な引数: row (デフォルト)、row-reverse、column、column-reverse。

コンテンツの両端揃え

現在の行の主軸上にコンテンツを配置する方法を決定します。オプションの引数: left、right、center、space-between、space-around。

アイテムの整列

各行の交差軸上にフレックス アイテムを配置する方法のデフォルトを決定します。

コンテンツの配置

交差軸線の位置合わせ方法のデフォルトを決定します。

整列-自己

単一のアイテムを交差軸に沿って配置する方法を決定します。これは、align-items によって設定されたデフォルトを上書きします。

クロススタート

クロスエンド

クロス開始側/クロス終了側は、クロス開始側からクロス終了側までのフレックス ラインがフレックス アイテムで埋められる場所を決定します。

メインスタート

メインエンド

main -start/main-end側は、main-start 端から main-end 端まで、flex コンテナー内で flex アイテムの配置を開始する場所を決定します。

注文

要素をグループに配置し、コンテナー内での配置順序を決定します。

フレックスフロー

flex コンテンツを配置するには、flex-direction と flex-wrap のショートハンドを使用します。

ライン

フレックス アイテムは、flex-wrap プロパティで定義される単一の行または複数の行に配置できます。このプロパティは、交差軸の方向とコンテナー内での行の積み重ね方の両方を制御します。

メインサイズ

クロスサイズ

メイン サイズとクロス サイズは、フレックス コンテナーの高さと幅であり、それぞれメイン軸とクロス軸を扱います。

要素を flex 要素として指定するには、次のように、要素の CSS 表示プロパティを flex または inline-flex に設定する必要があります。

ディスプレイ:フレックス; 

または：

ディスプレイ:インラインフレックス; 

displayを上記の2つの値のいずれかに設定すると、要素はフレックスコンテナになり、その子であるフレックスアイテムになります。displayをflexに設定するとコンテナはブロックレベル要素になり、displayをinline-flexに設定するとコンテナはインラインレベル要素になります。^[4]

フレックスボックスの利点の 1 つは、コンテナー内のアイテムを垂直方向と水平方向の両方でページの中央に簡単に配置できることです。

display : flex ; align-items : center ; justify-content : center ;