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

Linksbündige letzte Zeile in mehrzeiliger Flexbox

In Flexbox-Layouts kann die Ausrichtung der letzten Zeile auf der linken Seite eine Herausforderung darstellen Die letzte Zeile enthält nicht die gleiche Anzahl an Elementen wie die anderen Zeilen. Diese Unregelmäßigkeit stört den gewünschten Rastereffekt.

Um dieses Problem zu lösen, können wir eine Technik anwenden, die „filling-empty-space-childs“-Divs verwendet. Diese Divs haben eine Höhe von Null, sodass sie in eine neue Zeile reduziert werden können, ohne das Layout zu beeinträchtigen.

Bedenken Sie den folgenden HTML-Code:

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

Und das entsprechende CSS:

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

In dieser Lösung belegen die „filling-empty-space-childs“-Divs den verbleibenden Platz in der letzten Zeile. Wenn die letzte Zeile vier Elemente enthält, werden diese Divs zu einer neuen Zeile zusammengefasst, die unsichtbar ist und keinen Platz einnimmt. Wenn jedoch weniger als vier Elemente vorhanden sind, richten die zusätzlichen Divs „filling-empty-space-childs“ die letzten Elemente auf der linken Seite aus und behalten so den Rastereffekt bei.

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