フレックスコンテナをネストするときのフレックスプロパティの正しい使い方

フレックスコンテナとフレックスアイテムの基本关系

フレックスボックスレイアウトにおいて、フレックスコンテナは常に親要素、フレックスアイテムは常に子要素となります。これは、フレックスフォーマッティングコンテキストの適用範囲が「親子関係」に限定されているためです。

子要素より下の階層にはフレックスレイアウトが効かない

注意したいのは、フレックスコンテナの孫要素やそれ以降の子孫要素は、フレックスレイアウトの対象外になるという点です。そのため、直接の子要素以外にflex-growなどのフレックス関連プロパティを指定しても、何の効果もありません。

ネストするときはdisplayを再度指定する

フレックスコンテナの中にさらにフレックスレイアウトを作りたい場合(ネスト構造)は、対象の子要素に対して必ず次のいずれかを指定し直す必要があります。

display: flex;

または

display: inline-flex;

つまり、ネストされた要素は「親から見ればフレックスアイテム」であり、同時に「自分の子要素から見ればフレックスコンテナ」という2つの役割を担うことになります。

フレックスコンテナにのみ使えるプロパティ

以下のプロパティは、フレックスコンテナ側に指定するものです。

justify-content
flex-wrap
flex-direction

フレックスアイテムにのみ使えるプロパティ

一方、次のプロパティはフレックスアイテム側に指定します。

align-self
flex-grow
flex

まとめ

フレックスプロパティを扱うときは、「今操作している要素がフレックスコンテナなのか、フレックスアイテムなのか」を常に意識することが重要です。親子関係を正しく把握し、ネストの各階層でdisplay: flex(またはdisplay: inline-flex)を忘れずに設定すれば、複雑なレイアウトでも思い通りの結果を得られます。