Comment garantir que les enfants Flexbox occupent l'espace vertical disponible ?

Assurer que les enfants Flexbox occupent l'espace vertical disponible

Lors de l'utilisation d'une disposition Flexbox avec plusieurs colonnes, il peut être souhaitable que les enfants occupent différents hauteurs pour utiliser pleinement l'espace disponible, plutôt que d'être limité à la taille de l'enfant le plus grand de la rangée.

Résoudre le problème

Les rangées Flexbox se comportent naturellement en alignant les éléments verticalement dans leur espace désigné. Cependant, pour empêcher les éléments de s'étirer sur toute la hauteur de la ligne, la propriété align-items peut être utilisée pour contrôler l'alignement vertical.

Solution

Pour atteindre l'objectif comportement souhaité, définissez la propriété align-items sur flex-start :

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

Cela permettra aux enfants de conserver leur hauteur intrinsèque, tout en conservant l'alignement vertical de la rangée.

Options supplémentaires

Si la disposition souhaitée nécessite un comportement d'espacement plus complexe, envisagez d'utiliser l'orientation des colonnes ou le module multi-colonnes pour obtenir les résultats souhaités. Pour plus d'informations, reportez-vous à la réponse SO complète sur https://stackoverflow.com/a/20862961/1652962.

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!