Comment aligner à gauche la dernière ligne dans une mise en page Flexbox multiligne ?

Alignement de la dernière ligne à gauche dans une Flexbox multiligne

Dans les mises en page Flexbox, l'alignement de la dernière ligne sur le côté gauche peut présenter des défis lorsque la dernière ligne ne contient pas le même nombre d'éléments que les autres lignes. Cette irrégularité perturbe l'effet de grille souhaité.

Pour résoudre ce problème, nous pouvons employer une technique utilisant des divs "filling-empty-space-childs". Ces divs ont une hauteur nulle, ce qui leur permet de se réduire en une nouvelle ligne sans affecter la mise en page.

Considérez le code HTML suivant :

<code class="html"><div class="container">

    <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>

</div></code>

Et le CSS correspondant :

<code class="css">.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

.filling-empty-space-childs {
    width: 130px; /*match the width of the items*/
    height: 0;
}</code>

Dans cette solution, les divs "filling-empty-space-childs" occupent l'espace restant dans la dernière ligne. Si la dernière ligne comporte quatre éléments, ces divs se réduiront en une nouvelle ligne, invisible et n'occupant aucun espace. Cependant, s'il y a moins de quatre éléments, les divs supplémentaires "filling-empty-space-childs" aligneront les derniers éléments sur le côté gauche, en conservant l'effet de grille.

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!