美しいページを実現することはフロントエンドエンジニアのコアコンピテンシーの一つであり、美しいページを実現するためのコア技術となるのがCSSレイアウト技術ですが、CSSレイアウトは始めるのは簡単ですが、習得するのは難しいです。ユーザーの美的基準がますます高くなるにつれて、フロントエンド ページの精緻さと実用性に対する要求はますます高くなっており、CSS レイアウトを深く理解することで競争力をより早く向上させることができます。
フレックス
Flex とは、「柔軟なレイアウト」または「柔軟なボックス」を意味する Flexible Box の略語で、さまざまなページ レイアウトをシンプルかつ完全かつレスポンシブに実現できる CSS3 の新しいレイアウト モードです。どのような画面サイズでも優れた効果を発揮します。およびデバイスの種類。現在、ほぼすべてのブラウザが Flex レイアウトをサポートしています。フレックス レイアウトはフレックスボックスとも呼ばれ、フレックス レイアウトを使用すると、子要素に対する強力なスペース割り当てと位置合わせ機能が提供されます。Flex レイアウトを採用する要素は、フレックス コンテナ (略して「コンテナ」) と呼ばれます。そのすべての子要素は自動的に、フレックス アイテム (略して「アイテム」) と呼ばれるコンテナーのメンバーになります。コンテナにはデフォルトで 2 つの軸、つまり水平主軸 (メイン軸) と垂直クロス軸 (クロス軸) があります。主軸の開始位置をメインスタート、終了位置をメインエンド、交差軸の開始位置をクロススタート、終了位置をクロスエンドといいます。デフォルトでは、項目は主軸に沿って配置されます。1 つのアイテムが占める主軸のスペースをメイン サイズと呼び、1 つのアイテムが占める横軸のスペースをクロス サイズと呼びます。以下に示すように: