フレックスコンテナのネスト時のフレックスプロパティの適切な使用

Question

フレックスボックスの使用に問題があり、親要素と子要素のネストのしくみを明確にしたいと考えました。

私は子供が親のフレックスを継承していることを知っています。しかし、あなたは子供（赤ちゃん）のために子供をフレキシブルにする必要がある場合、それは上書きされますか？フレックスボックスの正しい使い方は？

子供のためにdisplay: flexをの子供のために服用しなければならない場合、または子供の親のフレックスを上書きするのはいつですか？

.parent-container { 
    display: flex; 
    flex: 1 0 100%; 
} 
.child-container { 
    flex: 1 1 50% 
} 
.baby-of-child-container { 
    flex: 1 1 50%; 
} 

<div class='parent-container'> 
    <div class='child-container'> 
    <div class='baby-of-child-container'></div> 
    <div class='baby-of-child-container'></div> 
    </div> 
    <div class='child-container'> 
    <div class='baby-of-child-container'></div> 
    <div class='baby-of-child-container'></div> 
    </div> 
</div> 

Answer 1

flex formatting contextの範囲は、親/子関係に制限されています。

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

子を超えたフレックスコンテナの子孫は、フレックスレイアウトの一部ではなく、フレックスプロパティを受け入れません。

フレックスプロパティを子供に適用するには、常にdisplay: flexまたはdisplay: inline-flexを親に適用する必要があります。

フレックスコンテナ（例えば、justify-content、flex-wrap及びflex-direction）にのみ適用され、特定の屈曲特性があり、フレックスアイテム（例えば、align-self、flex-growとflex）にのみ適用され、特定の屈曲特性があります。

ただし、フレックスアイテムはフレックスコンテナでもあります。このような場合、要素はすべてのflexプロパティを受け入れることができます。各プロパティが異なる機能を実行するので、内部的な競合はなく、上書きする必要はありません。