Comment centrer la dernière ligne d'éléments dans une disposition en grille CSS ?

Comment obtenir un alignement central sur la dernière ligne d'une grille CSS

Lorsque vous utilisez une grille CSS pour disposer des éléments, il devient difficile à réaliser alignement central sur la dernière rangée en raison de la nature des pistes de la grille. Cependant, flexbox offre une solution plus adaptée à de telles exigences d'alignement.

Pour aligner la dernière rangée d'éléments horizontalement au centre, appliquez les propriétés flexbox à l'élément conteneur :

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Le flex -wrap : la propriété wrap permet aux éléments de s'écouler sur plusieurs lignes si nécessaire, tandis que justifier-content : center regroupe tous les éléments dans le sens horizontal par rapport à l'ensemble. rangée.

Ensuite, définissez le comportement flex pour les éléments individuels :

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

Ici, flex : 0 0 calc(16.66% - 20px) spécifie les dimensions de l'élément et garantit que tous les éléments sont de taille égale. box-sizing : border-box doit être inclus pour des calculs précis.

En conséquence, les éléments seront répartis uniformément sur les lignes et la dernière ligne sera centrée en raison de la propriété justification-content: center. Cette approche élimine les limitations de CSS Grid et fournit une solution flexible pour centrer les éléments de la dernière ligne pour un nombre arbitraire d'éléments.

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!