使用 Flexbox Wrap 時如何防止最後一個 Flex 專案居中？-css教學-PHP中文網

使用 Flexbox Wrap 時如何防止最後一個 Flex 專案居中？

Susan Sarandon

發布： 2024-11-23 12:06:14

原創

623 人瀏覽過

How to Prevent Centering of the Last Flex Items When Using Flexbox Wrap?

如何更改 Flexbox 換行

在此響應式 Flexbox 場景中，Flex 專案會隨著螢幕尺寸的減少而逐漸換行。為了微調環繞行為，我們將探討如何保持最後一個Flex 專案不居中，從左側開始：

實作Ghost 元素：

CSS 可以用於建立「幽靈」元素以佔據最後一行的剩餘空間。例如，假設潛在的列長度為 4，我們需要 3幽靈元素：

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

登入後複製

偽元素：

也可以使用偽元素，減少2所需的幽靈元素數量：

::after {
    content: "";
    flex: 1;
}

登入後複製

編輯範例：

這是添加了這些幽靈元素的程式碼更新版本：

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

登入後複製

透過這些增強功能，彈性項目將根據需要換行，最後2 個項目不居中並從左側開始。

以上是使用 Flexbox Wrap 時如何防止最後一個 Flex 專案居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！