フレックス アイテムの複雑な性質: ブロック レベルかフレックス レベル?

フレックス アイテムがブロック レベルであるかどうかという問題は、以前から話題になっています。 CSS 開発者間での議論。 CSS フレキシブル ボックス レイアウト モジュール レベル 1 では、フレックス項目はブロック レベルではなくフレックス レベルにあると規定されています。ただし、後のセクションでは、フレックス項目の表示値が「ブロック化」されることを示唆しています。これにより、フレックス項目は結局ブロック レベルなのでしょうか?

この矛盾を理解するには、CSS の display の概念を理解することが重要です。各要素には、そのレイアウト方法を定義する表示プロパティがあります。フレックス項目の場合、表示値は最初は「ブロック」に設定されます。これは、フレックス項目の inline プロパティが inline-block などの別の値に設定されている場合、自動的に block に変換されることを意味します。これはブロック化として知られています。

したがって、フレックス項目は本質的にフレックスレベルのボックスとみなされますが、その表示値はブロック化されます。これは、従来の意味でのブロックレベルのボックスにはなりません。これらはフレックス レベルのボックスのままですが、独自の書式設定コンテキスト内ではブロック要素のように動作します。

要約すると、フレックス項目はフレックス レベルで存在しますが、その表示値はブロック化されています。この区別により、それらは、フレックス フォーマットに参加しながら、含まれる要素のブロック要素としても機能することができます。この概念を理解することは、CSS のレイアウトとスタイルを正確に行うために非常に重要です。