Comment aligner à gauche la dernière ligne d'une grille Flexbox ?

Comment aligner à gauche la dernière ligne d'une grille Flexbox

Flexbox est un module de mise en page puissant qui offre un moyen simple et flexible de distribuer des éléments sur une page Web. Cependant, lors de l'alignement d'éléments sur plusieurs lignes, la dernière ligne peut ne pas toujours s'aligner comme prévu. Ce problème survient lorsque le nombre d'éléments dans la dernière ligne est différent des autres lignes, ce qui entraîne le centrage des éléments.

Pour relever ce défi, envisagez la solution suivante :

1. Dans le HTML, incluez plusieurs divs vides avec la classe "filling-empty-space-childs". Ces divs serviront d'espaces réservés pour garantir que la dernière ligne remplisse la grille.

<code class="html"><div class="item"></div>
<div class="item"></div>
...
<div class="item"></div>
<div class="filling-empty-space-childs"></div>
<div class="filling-empty-space-childs"></div>
<div class="filling-empty-space-childs"></div></code>

2. Stylisez les divs "filling-empty-space-childs" avec une hauteur nulle. Cela garantit qu'ils s'effondrent dans de nouvelles lignes, permettant à la dernière ligne de s'aligner à gauche.

<code class="css">.filling-empty-space-childs {
    width: 205px; /* Adjust to match the width of grid items */
    height: 0;
}</code>

En implémentant cette solution, la dernière ligne de la grille flexbox s'alignera toujours à gauche, en conservant la l'intégrité de la grille, quel que soit le nombre d'éléments qu'elle contient.

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!