Maison > interface Web > tutoriel CSS > Comment garantir que les enfants Flexbox occupent l'espace vertical disponible ?

Comment garantir que les enfants Flexbox occupent l'espace vertical disponible ?

Susan Sarandon
Libérer: 2024-11-08 08:22:01
original
847 Les gens l'ont consulté

How to Ensure Flexbox Children Occupy Available Vertical Space?

Assurer que les enfants Flexbox occupent l'espace vertical disponible

Lors de l'utilisation d'une disposition Flexbox avec plusieurs colonnes, il peut être souhaitable que les enfants occupent différents hauteurs pour utiliser pleinement l'espace disponible, plutôt que d'être limité à la taille de l'enfant le plus grand de la rangée.

Résoudre le problème

Les rangées Flexbox se comportent naturellement en alignant les éléments verticalement dans leur espace désigné. Cependant, pour empêcher les éléments de s'étirer sur toute la hauteur de la ligne, la propriété align-items peut être utilisée pour contrôler l'alignement vertical.

Solution

Pour atteindre l'objectif comportement souhaité, définissez la propriété align-items sur flex-start :

#container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
Copier après la connexion

Cela permettra aux enfants de conserver leur hauteur intrinsèque, tout en conservant l'alignement vertical de la rangée.

Options supplémentaires

Si la disposition souhaitée nécessite un comportement d'espacement plus complexe, envisagez d'utiliser l'orientation des colonnes ou le module multi-colonnes pour obtenir les résultats souhaités. Pour plus d'informations, reportez-vous à la réponse SO complète sur https://stackoverflow.com/a/20862961/1652962.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal