Comment puis-je obtenir des articles flexibles de même largeur sur les rangées, même lors de l'emballage ?

Éléments flexibles de largeur égale dans des conteneurs de taille variable

Flexbox permet des mises en page flexibles et réactives, mais il peut rencontrer des défis lors de la tentative de maintenance largeur égale entre les éléments flexibles après la fin de la liste.

Flexbox actuelle Limitations

Dans sa spécification actuelle, Flexbox ne dispose pas d'une solution native pour un alignement de largeur égale sur la dernière ligne. Cela est dû au fait que les éléments flexibles sont dimensionnés en fonction de l'espace disponible et que la dernière ligne peut avoir moins d'espace restant.

Solution alternative : disposition en grille

Grille La mise en page, une autre technique de mise en page CSS, offre une solution plus robuste à ce problème d'alignement. Les grilles permettent un dimensionnement et un positionnement explicites des éléments dans un conteneur :

Code CSS

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

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

Explication

• La propriété grid-template-columns définit la taille et le nombre de colonnes dans la grille (autant que le conteneur peut contenir, chacune avec une largeur minimale de 100px et une unité flexible de 1fr).
• La propriété grid-auto-rows définit la hauteur des lignes (20px dans ce cas).
• grid-gap spécifie le espace entre les éléments.

Cette configuration répartit efficacement la largeur disponible de manière égale entre les éléments flexibles, leur permettant de s'enrouler et de conserver leur taille égale même sur le dernier rangée.

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!