Comment puis-je centrer les éléments uniquement sur la dernière ligne d'une disposition en grille réactive ?

Centrage des éléments sur la dernière ligne : grille CSS vs Flexbox

Dilemme :
Lors de l'utilisation de grilles CSS pour aligner des éléments dans un grille uniformément espacée, comment pouvez-vous centrer les éléments sur la dernière rangée uniquement tout en accueillant un nombre quelconque de éléments ?

Ne convient pas à la grille CSS :
Les grilles CSS ne sont pas idéales pour aligner des éléments sur une ligne ou une colonne entière, car les pistes entrecroisées gênent l'effet souhaité.

Alternative : Flexbox
Pour obtenir le centrage souhaité, pensez à utiliser flexbox avec justification-content: center. Cela regroupera les éléments horizontalement au centre de la ligne, tandis que les marges les écarteront.

Mécanique :
Sur les lignes complètes, justifier le contenu n'a aucun effet, ce qui rend les éléments entièrement justifié sans espace libre. Cependant, sur les lignes avec de l'espace libre (c'est-à-dire la dernière ligne), les éléments seront centré.

Exemple :

CSS :

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

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

* {
  box-sizing: border-box;
}

HTML :

<div>

Résultat :
Avec Avec cette approche, les éléments de la dernière ligne seront centrés tandis que la mise en page reste sensible aux différents nombres 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!