web-dev-qa-db-fra.com

Comment étirer les enfants pour qu'ils remplissent leur axe transversal?

J'ai une flexbox gauche-droite:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Le problème est que le bon enfant ne se comporte pas de manière réactive. Pour être précis, je veux qu'il remplisse la hauteur de l'emballage.

Comment accomplir ceci?

cssflexbox
104
Deborah Cole

  • Les enfants d'un conteneur row-flexbox remplissent automatiquement l'espace vertical du conteneur.

  • Spécifiez flex: 1; pour un enfant si vous souhaitez qu'il remplisse l'espace horizontal restant:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
  • Spécifiez flex: 1; pour les deux enfants si vous souhaitez qu'ils remplissent une quantité égale de l'espace horizontal:
.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
136
Alex Shesterov