エラスティック プロパティを正しく使用してエラスティック コンテナをネストする

Question

フレックスボックスを正しく使用する際にいくつかの問題があり、親要素と子要素のネストについて説明が必要です。

子要素が親要素の flex プロパティを継承することはわかっていますが、さらに子孫の要素 (例: "孫") はどうなりますか?この場合のフレックスボックスの正しい使い方は何ですか?

つまり、子要素の子要素に適用するには、display: flex を子要素にも適用する必要があるのでしょうか?これは、最初の子要素の親要素の flex プロパティをオーバーライドしますか?

.parent-container {
  ディスプレイ: フレックス;
  フレックス: 1 0 100%;
  背景色:黄色;
}
.child-container {
  フレックス: 1 1 50%;
  背景色: 青;
}
.baby-of-child-container {
  フレックス: 1 1 50%;
  背景色: 緑;
}

<div class='parent-container'>
  <div class='子コンテナ'>
    <div class='子コンテナの赤ちゃん'>子</div>
    <div class='子コンテナの赤ちゃん'>子</div>
  </div>
  <div class='子コンテナ'>
    <div class='子コンテナの赤ちゃん'>子</div>
    <div class='子コンテナの赤ちゃん'>子</div>
  </div>
</div>

Answer 1

フレックスフォーマットコンテキストの範囲は、親子関係に限定されます。

これは、フレックス コンテナーが常に親であり、フレックス アイテムが常に子であることを意味します。フレックス プロパティは、この関係内でのみ機能します。

子レベルを超えるフレックス コンテナの子孫は、フレックス レイアウトに属さず、フレックス属性を受け入れません。

flex プロパティを子に適用するには、常に

display: flex または display: inline-flex を親に適用する必要があります。

一部のフレックス プロパティはフレックス コンテナー (

justify-content、flex-wrap、flex-direction など) にのみ適用されますが、一部のフレックス プロパティはフレックス コンテナーにのみ適用されます。フレックス項目 (align-self、flex-grow、flex など) にのみ適用されます。

ただし、フレックス項目はフレックスコンテナーになることもできます。この場合、要素はすべての flex プロパティを受け入れることができます。各プロパティは異なる機能を実行するため、内部競合はなく、何もオーバーライドする必要はありません。