Maison > Article > interface Web > 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 :
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!