Comment faire en sorte que les enfants Flexbox occupent toute la hauteur des parents ?

Les enfants Flexbox doivent occuper toute la hauteur du parent

Dans une disposition Flexbox, par défaut, les éléments enfants ne remplissent pas toute la hauteur de leur parent récipient. Cela peut être problématique lorsque l'on tente de créer un arrangement vertical cohérent.

Problème : Considérez l'exemple suivant où .flex-2-child dans .flex-2 est destiné à remplir la hauteur de son parent :

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

Cependant, flex-2-child n'occupe pas entièrement la hauteur car attendu.

Solution de contournement 1 : align-items: stretch:

.flex-2 {
  display: flex;
  align-items: stretch;
}

Cette solution modifie l'alignement des éléments flexibles, permettant à flex-2-child de s'étirer et de remplir la hauteur disponible.

Solution de contournement 2 : align-self :

.flex-2-child {
  align-self: stretch;
}

Cette solution alternative applique l'alignement directement à l'élément enfant, en garantissant qu'il remplit la hauteur de son élément flexible parent.

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!