Comment puis-je garantir que les articles flexibles sont de même largeur même après emballage ?

Articles flexibles de même largeur même après leur emballage

Flexbox offre un moyen puissant de créer des mises en page flexibles, mais il n'est pas toujours simple de répondre à des exigences d'alignement spécifiques. Un défi courant consiste à assurer des largeurs égales pour les éléments flexibles, même après leur passage à de nouvelles lignes.

Le problème

Envisagez un scénario dans lequel vous disposez d'une liste d'éléments avec des longueurs de contenu variables. Vous souhaitez qu'ils s'étirent de manière égale pour remplir la largeur du conteneur tout en conservant une largeur minimale et en s'ajustant à de nouvelles lignes si nécessaire. Cependant, en utilisant Flexbox seule, les éléments de la dernière ligne peuvent ne pas s'aligner uniformément.

Approche Flexbox originale

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  min-width: 100px;
  flex-grow: 1;
}

Cette approche répartira l'espace disponible entre les éléments, mais ce n'est pas le cas. assurez-vous que les largeurs sont égales pour la dernière ligne.

Solution de mise en page de grille

Heureusement, CSS Grid Layout fournit une solution à ce problème. Grid Layout utilise un mécanisme de mise en page plus explicite, le rendant plus prévisible. L'application de la disposition de grille à l'exemple ci-dessus résout le problème d'alignement.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
}

Cet extrait de code mis à jour utilise la propriété grid-template-columns pour définir les colonnes de la grille. La fonction de répétition (ajustement automatique, ...) alloue automatiquement les colonnes pour s'adapter au contenu, garantissant que tous les éléments ont des largeurs égales.

Conclusion

Bien que flexbox soit un outil de mise en page polyvalent, il est pas idéal pour les situations où vous avez besoin d’un alignement précis des éléments. Dans les cas où des éléments flexibles de largeur égale sont souhaités, Grid Layout offre une solution plus simple et plus prévisible.

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!