Utilisation correcte des propriétés flex lors de l'imbrication des conteneurs flex

Question

J'ai du mal à utiliser correctement le système Flexbox et je souhaitais obtenir des éclaircissements sur le fonctionnement de l'imbrication des éléments parents et enfants.

Je sais que l'enfant hérite du flex du parent. Mais est-ce que cela est écrasé si vous devez flexer un enfant pour ses enfants (bébé) ? Quelle est l'utilisation correcte de flexbox ?

Quand dois-je présenter ma demande ? display: flex à l'enfant pour son l'intérêt de l'enfant (du bébé), ou cela écrasera-t-il le flex du parent de l'enfant ?

.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

Le champ d'application d'un contexte de formatage flex est limitée à une relation parent/enfant.

Cela signifie qu'un conteneur flex est toujours le parent et qu'un élément flex est toujours l'enfant. Les propriétés flexibles ne fonctionnent que dans le cadre de cette relation.

Les descendants d'un conteneur flex au-delà des enfants ne font pas partie de la mise en page flex et n'accepteront pas les propriétés flex.

Vous devrez toujours appliquer display: flex o display: inline-flex à un parent afin d'appliquer des propriétés flexibles à l'enfant.

Il existe certaines propriétés flexibles qui ne s'appliquent qu'aux conteneurs flex (par ex, justify-content , flex-wrap y flex-direction ), et il existe certaines propriétés flexibles qui ne s'appliquent qu'aux éléments flexibles (par ex, align-self , flex-grow y flex ).

Toutefois, les articles flexibles peuvent également être des conteneurs flexibles. Dans ce cas, l'élément peut accepter toutes les propriétés flex. Étant donné que chaque propriété remplit une fonction différente, il n'y a pas de conflit interne et rien ne doit être surchargé.