Maison > interface Web > tutoriel CSS > Comment puis-je faire en sorte que les enfants Flexbox utilisent l'espace disponible pour des hauteurs séparées ?

Comment puis-je faire en sorte que les enfants Flexbox utilisent l'espace disponible pour des hauteurs séparées ?

Susan Sarandon
Libérer: 2024-11-08 11:37:02
original
449 Les gens l'ont consulté

How Can I Make Flexbox Children Utilize Available Space for Separate Heights?

S'assurer que les enfants Flexbox utilisent l'espace disponible pour des hauteurs séparées

Question :

Dans une disposition flexbox à deux colonnes, comment des éléments de différentes tailles peuvent-ils être répartis pour remplir toute la zone accessible plutôt que d'avoir la même hauteur que le plus haut element?

Contexte :

En utilisant la propriété flex-wrap de flexbox, nous pouvons envelopper des éléments sur plusieurs lignes. Cependant, par défaut, tous les éléments d'une ligne ont tendance à avoir la même hauteur que l'élément le plus haut de cette ligne. Cela peut être indésirable si l'on souhaite que les éléments conservent leur hauteur naturelle.

Exemple :

Considérez le code suivant :

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex: 1 auto;
}
Copier après la connexion

Réponse :

Flexbox implique, de par sa conception, que les lignes se comportent comme décrit au-dessus de. Flexbox n'a pas l'intention d'imiter les dispositions de style maçonnerie dans lesquelles les éléments de rangée peuvent s'étendre dans l'espace des rangées voisines. Il existe des options limitées pour ajuster la hauteur des éléments à l'aide d'align-items :

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

Comme alternative, envisagez d'utiliser l'orientation des colonnes ou d'explorer le module multi-colonnes pour plus d'options de personnalisation.

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