Comment puis-je obtenir des éléments flexibles de même largeur sur plusieurs lignes ?

Maintenir les éléments flexibles de même largeur pendant l'emballage

En CSS, obtenir une mise en page dans laquelle les éléments flexibles conservent une largeur égale, même après avoir été enveloppés dans de nouvelles lignes , peut être un défi.

Utiliser Flexbox

Avec flexbox, bien qu'il soit possible de configurer les éléments pour qu'ils s'agrandissent dynamiquement pour remplir la largeur du conteneur, il n'y a pas de fonctionnalité intégrée pour garantir une largeur égale pour tous les éléments, en particulier dans la dernière ligne. Cette limitation découle de la portée actuelle de la spécification flexbox.

Approche alternative : disposition en grille

Grid Layout, une autre technologie CSS3, fournit une solution plus flexible pour le dernier- alignement des lignes. En utilisant la propriété grid-template-columns, il est possible de répartir les éléments de manière uniforme, même lorsqu'ils s'enroulent sur plusieurs lignes.

Implémentation

Pour obtenir la disposition souhaitée :

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

Ce code crée une grille avec répartition automatique des colonnes en fonction de la largeur disponible. Chaque colonne peut contenir un ou plusieurs éléments flexibles d'une largeur minimale de 100 px et d'une largeur flexible qui s'agrandit pour remplir l'espace restant dans la colonne. La propriété grid-auto-rows définit la hauteur de chaque ligne à 20 px, et grid-gap ajoute 5 px d'espacement entre les éléments.

Conclusion

Bien que flexbox soit un Outil de mise en page puissant, ses limites actuelles rendent difficile l'alignement sur une largeur égale dans la dernière ligne. Grid Layout, avec ses capacités plus avancées, fournit une solution fiable pour ce scénario.

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!