如何控制最後一行的奇數 Flexbox 換行？

如何控制Flexbox 換行行為

問題

建立響應式Flexbox 版面時，您可能會遇到最後幾個項目換行奇怪的情況，在前一行留下過多的空間。例如，在基於 API 呼叫動態渲染的卡片網格中，您希望最後兩張卡片從左側換行，確保它們與前面的卡片對齊而不是居中。

解決方案

您可以透過 CSS 修改 Flexbox 環繞行為以實現所需的對齊方式。兩種常見的方法包括：

使用「幽靈」元素

創造沒有可見內容的「幽靈」元素。這些元素有效地填充了最後一行，將後續的卡片推到下一行。 “ghost”元素的數量對應於預期的列長度。

例如，對於潛在的列長度 4，您將需要 3 個「ghost」元素。使用 CSS：

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

使用 ::after 偽元素

或者，使用 CSS 偽元素 ::after。這種方法減少了所需的“幽靈”元素的數量。

.card::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
}

此偽元素充當佔位符，填滿最後一行的剩餘空間。

透過實現以下任一方法透過這些技術，您可以調整 Flexbox 佈局的換行行為，確保最後的項目正確對齊，無論螢幕大小或渲染的卡片數量如何。

以上是如何控制最後一行的奇數 Flexbox 換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！