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

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!