フレックス項目はブロックレベル要素ですか、それともフレックスレベル要素ですか?

フレックス項目: ブロック レベルまたはフレックス レベル?

フレックス項目は、フレキシブル ボックス レイアウトの基本コンポーネントです。ブロック レベル要素カテゴリに属する​​かフレックス レベル要素カテゴリに属する​​かという問題が生じます。

フレックス レベルの指定

CSS フレキシブル ボックス レイアウト モジュール レベル 1 によれば、フレックス項目は次のようになります。フレックスレベル要素とみなされます。これは、ブロック書式設定コンテキストではなく、コンテナのフレックス書式設定コンテキスト内に存在することを意味します。

ブロック化された表示値

ただし、CSS 仕様では、フレックス項目の表示値は「ブロック化」されています。これは、フレックス コンテナ内の子要素にインライン レベルの表示値が指定されている場合、その値がブロック レベルの同等の値に変換されることを意味します。

不一致の調整

この明らかな矛盾を解決するには、表示プロパティの役割を理解することが重要です。各要素には表示値があり、書式設定コンテキスト内で要素がどのように動作するかを指定します。

フレックス項目の場合、デフォルトの表示値はブロックです。これは、子要素が存在する内部からは、ブロックレベルの動作を示すことを意味します。ただし、外部から見ると、フレックス コンテナのコンテキストでは、これらはフレックス レベルの要素とみなされ、フレックス ベースのレイアウトに参加します。

デュアル パースペクティブ

内側の世界と外側の世界という 2 つの異なる世界を視覚化します。フレックス項目の内部では、要素はそれをブロックレベルの要素として認識します。フレックス コンテナ内では、フレックス アイテム自体がフレックス レベルの要素とみなされます。

インライン変更の影響

フレックス アイテムのインライン表示値を設定すると、フレックス アイテムの表示値が変更されます。内側から自然を認識します。インライン アスペクトが削除され、フレックス アイテムはその子要素に対してブロック、グリッド、テーブル、またはフレックス コンテナーとして表示されます。

結論

フレックス アイテムは本質的にフレックスレベル要素ですが、インライン表示値を指定することで「ブロック化」できます。これにより、コンテナのフレックス レイアウトに参加しながら、子要素の動作を制御できるようになります。

以上がフレックス項目はブロックレベル要素ですか、それともフレックスレベル要素ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。