Comment puis-je garantir des largeurs d'articles cohérentes dans Flexbox après l'emballage ?

Cohérence de la largeur de l'élément après l'emballage de la Flexbox

Introduction :
En CSS, la disposition de la flexbox offre une flexibilité pour organiser les éléments en leur donnant un dimensionnement dynamique et capacités d'emballage. Cependant, un problème courant est de garantir des largeurs d'éléments égales après l'emballage.

Le problème :
Lors de l'utilisation de flexbox, il est possible de créer une mise en page dans laquelle les éléments ont une largeur minimale et peuvent grandir pour remplir l’espace disponible. Cependant, lorsque les éléments s'enroulent sur plusieurs lignes, les éléments de la dernière ligne peuvent avoir des largeurs inégales, ce qui entraîne une apparence indésirable.

Solution CSS uniquement :
Malheureusement, le CSS pur ne le fait pas proposent actuellement une solution propre pour aligner les éléments flexibles dans la dernière ligne. Cela dépasse la portée de la spécification flexbox.

Approche alternative : disposition en grille CSS
La disposition en grille, une autre technologie CSS3, fournit une solution à ce problème. Les grilles permettent un contrôle plus précis sur le placement des éléments et peuvent garantir des largeurs d'éléments égales sur la dernière ligne :

Code :

.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 :

• affichage : la grille définit l'élément conteneur pour qu'il utilise une grille layout.
• grid-template-columns définit les colonnes de la grille, avec un ajustement automatique créant autant de colonnes que nécessaire et minmax() définissant la largeur minimale et maximale de chaque colonne.
• grid-auto-rows spécifie la hauteur des lignes, dans ce cas, 20px.
• grid-gap ajoute un espace entre la grille articles.

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!