Comment aligner la dernière ligne d'une mise en page Flexbox multiligne sur la gauche ?

Alignement de la dernière ligne d'une disposition Flexbox multiligne

Lors de la création d'un conteneur avec des éléments disposés selon un motif de grille à l'aide de flexbox, il est courant de rencontrer un problème où la dernière ligne d'éléments ne s'aligne pas correctement avec les autres. En effet, flexbox centre les éléments par défaut lorsque la ligne n'a pas le même nombre d'éléments que les autres lignes.

Pour résoudre ce problème et aligner la dernière ligne sur le côté gauche, les étapes suivantes peuvent être suivies :

1. Créer des divs remplissant des espaces vides : Dans la structure HTML, ajoutez trois éléments div avec la classe "filling-empty-space-childs". Définissez la largeur de ces divs pour qu'elle corresponde à celle des éléments de la grille et attribuez-leur une hauteur de 0. Cette hauteur leur permettra de "s'effondrer" lorsqu'ils tomberont dans une nouvelle ligne, garantissant ainsi que tout espace supplémentaire est rempli.

2. Styles CSS : Organisez les éléments flexbox à l'aide de CSS avec les propriétés suivantes :

   • Affichage : Flex : Définissez le conteneur sur afficher sous forme de boîte flexible.
   • Flex-Wrap : Wrap : Autoriser les éléments à s'enrouler sur de nouvelles lignes si nécessaire.
   • Justify-Content : Space-Around : Répartissez uniformément les éléments dans les cellules de la grille.

En mettant en œuvre ces étapes, la dernière ligne d'éléments sera toujours alignée sur le côté gauche, même si elle contient un nombre d'éléments différent de celui des autres lignes. Cela garantit une disposition de grille cohérente et organisée.

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!