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

Flexbox : Remplir l'espace vertical disponible

Dans une ligne flexbox horizontale, l'utilisation de la propriété "flex" sur un élément lui permet de s'agrandir et remplir l'espace horizontal disponible. Et si vous souhaitez obtenir un effet similaire verticalement ?

Le défi consiste à garantir qu'un élément vertical se dilate pour remplir l'espace restant, permettant ainsi à d'autres éléments de s'empiler verticalement. Pour résoudre ce problème, vous pouvez utiliser les propriétés flexbox suivantes :

• flex-direction : column sur le conteneur flex aligne les éléments verticalement au lieu d'horizontalement.
• flex : 1 sur l'élément qui doit remplir l'espace restant lui permet de grandir et d'occuper le reste height.

Considérons l'exemple suivant :

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

Dans cette configuration, le conteneur .row a une hauteur fixe de la fenêtre d'affichage du navigateur en utilisant height : 100vh. L'élément .flex a flex: 1, ce qui l'amène à se développer et à remplir l'espace vertical restant. En conséquence, les deux autres éléments s'empilent verticalement dans le conteneur .row.

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!