web-dev-qa-db-fra.com

Flexbox remplir l'espace disponible verticalement

Maintenant dans une ligne flexbox je peux écrire

<div layout="row">
  <div>some content</div>
  <div flex></div> <!-- fills/grows available space -->
  <div>another content</div>
</div>

Je voudrais réaliser la même chose mais verticalement, comme sur cette photo enter image description here Actuellement, le problème est que la div qui aurait besoin de croître n'a pas de hauteur donc les deux contenus sont en dessous l'un de l'autre. Je veux que mon deuxième contenu soit au bas du conteneur parent qui a une hauteur fixe!

Je sais que je pourrais résoudre ce problème en positionnant le deuxième contenu absolu et bottom: 0; mais est-ce que je peux y arriver avec flexbox?

htmlcsscss3flexbox
19
Jim-Y

Vous pouvez donc essayer ceci:

  1. flex-direction: column pour le conteneur flexible.

  2. flex: 1 pour l'élément qui doit remplir l'espace restant.

Voir la démo ci-dessous où le flexbox couvre la hauteur de la fenêtre d'affichage:

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>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

À votre santé!

37
kukkuz

Vous avez juste besoin d'utiliser flex-direction: column sur le parent et flex: 1 sur le div moyen.

body,
html {
  padding: 0;
  margin: 0;
}
.row {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.row > div:not(.flex) {
  background: #676EE0;
}
.flex {
  flex: 1;
  background: #67E079;
}
<div class="row">
  <div>some content</div>
  <div class="flex"></div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>
15
Nenad Vracar