如何左對齊多行 Flexbox 版面配置中的最後一行？

多行Flexbox 中的最後一行左對齊

在Flexbox 版面配置中，將最後一行向左對齊可能會帶來挑戰最後一行一行包含的元素數量與其他行不同。這種不規則性破壞了所需的網格效果。

為了解決這個問題，我們可以採用一種使用「filling-empty-space-childs」div 的技術。這些 div 的高度為零，允許它們折疊成新行而不影響佈局。

考慮以下HTML 程式碼：

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

以及對應的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>

在此解決方案中，「filling-empty-space-childs」div佔據了最後一行的剩餘空間。如果最後一行有四個元素，這些 div 將折疊成一個新行，不可見且不佔用空間。但是，如果元素少於四個，額外的「filling-empty-space-childs」div 會將最後一個元素對齊到左側，保持網格效果。

以上是如何左對齊多行 Flexbox 版面配置中的最後一行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！