Comment puis-je distribuer l'espace verticalement à l'aide de Flexbox ?

Distribution verticale de l'espace Flexbox

Lorsque vous traitez des dispositions de boîtes flexibles en rangées, il est simple de remplir l'espace disponible. Vous pouvez utiliser flex: 1 sur un élément pour indiquer qu'il doit consommer tout l'espace restant. Cependant, y parvenir verticalement peut être un peu plus délicat.

Flexbox verticale

Pour obtenir une distribution verticale de l'espace, considérez ces étapes :

1. Définissez la flexibilité du conteneur parent. direction vers la colonne.
2. Pour qu'un élément remplisse l'espace restant, attribuez-lui flex : 1.

Exemple

Voici une démonstration de code :

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 cet exemple, la classe flex sur l'élément du milieu indique qu'elle doit occupez l'espace restant dans la colonne verticale, en poussant les autres éléments vers le haut et le bas.

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!