Pourquoi mon Flex Child ne remplit-il pas la hauteur du conteneur ?

Comment étirer un enfant flexible pour remplir la hauteur du conteneur

Lorsque vous travaillez avec Flexbox, il est courant de rencontrer le problème où un élément enfant ne s'étend pas sur toute la hauteur de son contenant. Cela est souvent dû à une utilisation incorrecte de la propriété height: 100%.

Dans Flexbox, la propriété height: 100% peut être problématique car :

• L'élément parent a besoin d'un paramètre fixe height, ce qui va à l'encontre des principes de Flexbox.
• Lorsque plusieurs enfants sont présents, utiliser height: 100% sur un enfant ignorera les autres.

La solution est de supprimer le height : propriété 100 % et s'appuie sur le comportement par défaut de Flexbox. Par défaut, les éléments flexibles dans le sens d'une ligne (la disposition typique) s'alignent verticalement avec la propriété align-items: stretch. Cela signifie que l'élément enfant s'étirera automatiquement pour remplir la hauteur disponible du conteneur.

Voici un exemple qui démontre l'utilisation correcte sans hauteur : 100 % :

<code class="html"><div style='display: flex'>
  <div style='background-color: yellow; width: 20px'></div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div></code>

Dans cet exemple , l'enfant jaune s'étirera pour remplir la hauteur du conteneur, quelle que soit la hauteur du texte de l'enfant bleu. En effet, la valeur par défaut align-items: stretch garantit que les éléments flexibles sont étirés verticalement pour occuper l'espace disponible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!