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

Flexbox : remplir verticalement l'espace disponible

Dans une rangée de flexbox, l'utilisation de flex sur un élément lui permet de s'agrandir et de remplir l'espace disponible restant. Maintenant, la question se pose : pouvons-nous reproduire ce comportement verticalement ?

Dans le scénario décrit, vous avez une ligne flexbox dans laquelle vous souhaitez qu'un élément s'étende verticalement sur la hauteur du conteneur parent, même si le conteneur a un hauteur fixe. En positionnant l'élément de manière absolue avec bottom: 0; est une solution viable, le résultat souhaité est recherché à l'aide de flexbox.

Pour y parvenir :

1. Définissez la colonne flex-direction : pour le conteneur flex.
2. Attribuez flex : 1 à l'élément qui doit occuper l'espace restant.

Voici un demo :

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

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

Dans cet exemple, l'élément flexbox, avec flex: 1, remplit tout l'espace vertical du conteneur parent, comme vous le souhaitez.

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!