Comment centrer des éléments sur la dernière ligne avec Flexbox ?

Comment centrer les éléments sur la dernière ligne à l'aide de Flexbox

Lorsque vous utilisez une grille CSS pour disposer plusieurs éléments, il peut être difficile de les aligner les dans une rangée. Les grilles sont principalement conçues pour aligner des éléments dans une colonne ou une piste, ce qui rend difficile l'alignement sur une ligne entière.

Pourquoi la grille CSS n'est pas adaptée

Les grilles CSS utilisent un système de pistes et de cellules, avec des pistes s'étendant horizontalement ou verticalement. Lorsque vous placez des éléments dans une cellule de la grille, vous pouvez contrôler leur alignement dans cette cellule particulière. Cependant, l'alignement des éléments sur plusieurs cellules ou sur une ligne entière est gêné par les pistes qui s'entrecroisent.

Utiliser Flexbox pour l'alignement

Une approche plus appropriée pour aligner les éléments sur une ligne est d'utiliser flexbox. Flexbox est spécialement conçu pour organiser les éléments le long d'un seul axe (horizontal ou vertical), vous donnant ainsi plus de contrôle sur l'alignement.

Pour centrer les éléments sur la dernière ligne à l'aide de flexbox, appliquez les étapes suivantes :

1. Enveloppez les éléments dans un conteneur flexible.
2. Définissez la propriété justifier-content sur center pour aligner les éléments horizontalement dans le conteneur.
3. Utilisez la propriété flex pour spécifier la largeur et la flexibilité souhaitées de chaque élément.
4. Assurez-vous que tous les éléments ont la propriété box-sizing définie sur border-box pour inclure le remplissage et les bordures dans leur calcul de la largeur hors tout.

Exemple de code

L'extrait de code suivant montre comment obtenir un alignement centré sur la dernière ligne à l'aide de flexbox :

#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;
}

Explication

Dans cet exemple :

• Le # Le conteneur est configuré comme un conteneur flexible avec flex-wrap: wrap pour permettre aux éléments de s'enrouler sur plusieurs lignes.
• La justification-content: center garantit que les éléments sont centrés horizontalement dans le conteneur.
• La propriété flex est utilisée pour calculer dynamiquement la largeur de chaque élément en fonction de l'espace disponible.
• Définition de la taille de la boîte : border-box garantit que le rembourrage et les bordures sont inclus dans la largeur totale de l'article, évitant ainsi les inégalités espacement.

En utilisant flexbox, vous pouvez obtenir un alignement centré sur la dernière ligne, quel que soit le nombre d'éléments, rendant votre mise en page plus attrayante visuellement.

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!