Wie richtet man die letzte Zeile in einem mehrzeiligen Flexbox-Container linksbündig aus?

So richten Sie die letzte Zeile mehrzeiliger Flexbox-Container linksbündig aus

Flexbox-Layouts bieten eine leistungsstarke Methode zum Organisieren von Inhalten in Zeilen und Spalten . Wenn Sie jedoch mit mehrzeiligen Layouts arbeiten, kann es eine Herausforderung darstellen, sicherzustellen, dass die letzte Zeile linksbündig ausgerichtet ist.

Das Problem:

Betrachten Sie ein Layout wie ein Raster von Bildern, bei denen wir Elemente mithilfe von Flexbox gleichmäßig verteilen möchten. Standardmäßig zentriert die Eigenschaft justify-content: space-around Elemente in der letzten Zeile, wenn diese weniger Elemente als andere Zeilen enthält. Dadurch wird der beabsichtigte Rastereffekt unterbrochen.

Die Lösung:

Um die letzte Zeile links auszurichten, können wir „Leerraum“-Elemente einführen, die vertikal zusammenfallen und Platz beanspruchen im Container.

Schritte:

1. Leerraumelemente erstellen: div-Elemente zum HTML mit der Klasse „filling-“ hinzufügen empty-space-childs" Flexbox-Eigenschaften:
Stellen Sie sicher, dass der Container die folgenden Eigenschaften hat:

So funktioniert es:

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

3. Die leeren Raumelemente werden vertikal zusammengeklappt da ihre Höhe Null ist. Wenn die letzte Zeile weniger Elemente als andere Zeilen enthält, nehmen diese Leerraumelemente den verbleibenden Platz ein, wodurch die Elemente in der letzten Zeile effektiv linksbündig ausgerichtet werden.

Das obige ist der detaillierte Inhalt vonWie richtet man die letzte Zeile in einem mehrzeiligen Flexbox-Container linksbündig aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!