Comment aligner à gauche la dernière ligne dans un conteneur Flexbox multiligne ?

Comment aligner à gauche la dernière rangée de conteneurs Flexbox multilignes

Les mises en page Flexbox fournissent une méthode puissante pour organiser le contenu en lignes et en colonnes . Cependant, lorsque vous travaillez avec des mises en page sur plusieurs lignes, s'assurer que la dernière ligne est alignée à gauche peut poser des problèmes.

Le problème :

Considérez une mise en page comme une grille. d'images, où nous souhaitons répartir uniformément les éléments à l'aide de flexbox. Par défaut, la propriété justify-content: space-around centrera les éléments dans la dernière ligne si elle contient moins d'éléments que les autres lignes. Cela rompt l'effet de grille prévu.

La solution :

Pour aligner à gauche la dernière ligne, nous pouvons introduire des éléments « d'espace vide » qui s'effondrent verticalement et occupent de l'espace. dans le conteneur.

Étapes :

1. Créer des éléments d'espace vide : Ajoutez des éléments div au HTML avec la classe "filling- empty-space-childs".
2. Stylez les éléments d'espace vide : Appliquez les règles CSS suivantes :

<code class="css">.filling-empty-space-childs {
    width: [image width];
    height: 0;
}</code>

3. Définissez Propriétés de la flexbox : Assurez-vous que le conteneur possède les propriétés suivantes :

<code class="css">display: flex;
flex-wrap: wrap;
justify-content: space-around;</code>

Comment ça marche :

Les éléments de l'espace vide s'effondreront verticalement puisque leur hauteur est nulle. Lorsque la dernière ligne contient moins d'éléments que les autres lignes, ces éléments d'espace vide occuperont l'espace restant, alignant ainsi à gauche les éléments de la dernière ligne.

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!