Pourquoi la « hauteur : 100 % » sur une Flex Child casse-t-elle la Flexbox ?

Étirer un enfant flexible pour remplir la hauteur du conteneur sans hauteur explicite du parent

Dans les situations où nous devons étirer un enfant flexible pour remplir tout le conteneur taille, en garantissant que la taille du parent dépend du contenu d'un autre enfant, définir « hauteur : 100 % » sur l'enfant peut entraîner un comportement inattendu dans Flexbox.

Pourquoi utiliser « hauteur : 100 % » peut Casser Flexbox

Lors de l'utilisation de "hauteur : 100 %" dans Flexbox :

• Le parent de l'élément en cours d'étirement nécessite une hauteur déclarée, ce qui va à l'encontre du comportement par défaut de Flexbox.
• S'il y a d'autres enfants au-dessus ou en dessous de l'élément étiré, "hauteur : 100 %" ignorera leur présence et entraînera des conflits.

La solution : Supprimer " hauteur : 100%"

Pour obtenir l'étirement souhaité sans casser la Flexbox, supprimez simplement "hauteur : 100%" de l'élément enfant.

Explication

Dans Flexbox avec direction des lignes (valeur par défaut), la propriété "align-items" contrôle le comportement vertical. Son paramètre par défaut est "stretch", ce qui entraîne l'étirement automatique des éléments flexibles pour remplir la hauteur disponible, à condition que le parent n'ait pas défini de hauteur explicite.

Exemple de code

Considérez l'extrait de code suivant :

<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 toute la hauteur de son parent, tandis que la taille du parent s'ajustera automatiquement en fonction du contenu du texte de l'enfant bleu.

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!