Maison >interface Web >tutoriel CSS >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 :
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 :
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!