Utiliser correctement les propriétés élastiques pour imbriquer les conteneurs élastiques

Question

Je rencontre des problèmes pour utiliser correctement flexbox et j'aimerais avoir des éclaircissements sur l'imbrication des éléments parents et enfants.

Je sais que les éléments enfants héritent de la propriété flex de l'élément parent, mais qu'arrive-t-il aux éléments descendants ultérieurs (par exemple, les "petits-enfants") ? Quelle est l’utilisation correcte de flexbox dans ce cas ?

En d'autres termes, dois-je également appliquer display: flex aux éléments enfants, pour l'appliquer aux éléments enfants des éléments enfants ? Cela remplacera-t-il la propriété flex de l'élément parent du premier élément enfant ?

.parent-container {
  affichage : flexible ;
  flexion : 1 0 100 % ;
  couleur d'arrière-plan : jaune ;
}
.conteneur-enfant {
  flexion : 1 1 50 % ;
  couleur de fond : bleu ;
}
.bébé-d-enfant-conteneur {
  flexion : 1 1 50 % ;
  couleur de fond : vert ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class='parent-container'>
  <div class='conteneur-enfant'>
    <div class='bébé-d-enfant-conteneur'>enfant</div>
    <div class='bébé-d-enfant-conteneur'>enfant</div>
  </div>
  <div class='conteneur-enfant'>
    <div class='bébé-d-enfant-conteneur'>enfant</div>
    <div class='bébé-d-enfant-conteneur'>enfant</div>
  </div>
</div>

Answer 1

La portée d'un contexte de formatage flexible est limitée à une relation parent-enfant.

Cela signifie que le conteneur flex est toujours le parent et que les éléments flex sont toujours les enfants. Les propriétés Flex fonctionnent uniquement dans le cadre de cette relation.

Les descendants d'un conteneur flex qui dépasse le niveau enfant n'appartiennent pas à la mise en page flex et n'accepteront pas les attributs flex.

Pour appliquer les propriétés flex aux enfants, vous devez toujours appliquer display: flex或display: inline-flex au parent.

Certaines propriétés flexibles ne s'appliquent qu'aux conteneurs flexibles (par exemple justify-content、flex-wrap和flex-direction），而某些flex属性仅适用于flex项目（例如align-self、flex-grow和flex).

Cependant, les articles flexibles peuvent également être des conteneurs flexibles. Dans ce cas, l'élément peut accepter toutes les propriétés flex. Puisque chaque propriété remplit une fonction différente, il n’y a pas de conflits internes et rien ne doit être remplacé.