Comment faire en sorte que les enfants Flexbox occupent tout l'espace disponible tout en conservant leur hauteur d'origine ?

Flexbox : permettre aux enfants de taille variable d'utiliser pleinement l'espace disponible

Flexbox est un module de mise en page puissant qui permet aux développeurs Web de créer des mises en page flexibles. Un cas d'utilisation courant consiste à créer une disposition à deux colonnes dans laquelle chaque colonne contient des éléments enfants dont la hauteur varie. Cependant, par défaut, tous les enfants d'une rangée auront la taille de l'enfant le plus grand.

Problème :

Comment configurer une disposition Flexbox à deux colonnes pour permettre aux enfants de différentes tailles d'utiliser pleinement l'espace disponible au lieu que tous les enfants aient la taille de l'enfant le plus grand de la rangée ?

Solution :

Flexbox ne fonctionne pas nativement permettre aux lignes d'occuper l'espace alloué aux lignes précédentes ou suivantes. Ainsi, CSS à lui seul ne peut pas recréer un comportement de type maçonnerie où les éléments alignés peuvent s'étirer pour remplir l'espace disponible.

Implémentation :

Utilisation de la propriété align-items réglé sur flex-start peut empêcher les enfants de s'étirer, garantissant qu'ils conservent leur hauteur d'origine :

#container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

Cette solution garantit que chaque cellule conserve sa hauteur d'origine, empêchant l'enfant le plus grand d'imposer sa hauteur à l'ensemble rangée.

Approche alternative :

Vous pouvez également envisager d'utiliser l'orientation des colonnes ou le module multi-colonnes pour créer une mise en page avec des colonnes à hauteur variable. Cette approche permet aux éléments d'une colonne d'occuper toute la hauteur de cette colonne, obtenant ainsi l'effet souhaité.

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!