Maison >interface Web >tutoriel CSS >Comment puis-je faire en sorte qu'un élément enfant Flexbox remplisse l'espace vertical disponible ?

Comment puis-je faire en sorte qu'un élément enfant Flexbox remplisse l'espace vertical disponible ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-04 11:26:111042parcourir

How Can I Make a Flexbox Child Element Fill Available Vertical Space?

Flexbox : remplir efficacement l'espace vertical

Dans une ligne Flexbox, il est possible d'utiliser la propriété flex pour répartir l'espace horizontal disponible entre les enfants éléments. Cependant, étendre ce concept verticalement présente un défi.

Le problème : remplir l'espace vertical

Dans une disposition Flexbox verticale, le dilemme typique est que l'élément enfant qui a besoin pour remplir l'espace restant n'a pas de hauteur définie, ce qui fait que les éléments apparaissent les uns en dessous des autres.

Solution : aligner le contenu verticalement avec Flexbox

Pour résoudre ce problème, essayez l'approche suivante :

  1. flex-direction: column: Définissez cette propriété pour le conteneur Flexbox parent.
  2. flex: 1: Attribuez cette valeur à l'élément enfant qui doit remplir la verticale space.

Exemple :

Considérez la disposition Flexbox suivante :

<div>

Et le CSS associé :

.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}

Cette disposition garantira que l'élément ".flex" occupe l'espace vertical restant dans le conteneur parent ".row", qui a un hauteur fixe de 100vh (hauteur de la fenêtre).

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:
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