如何防止 Flexbox 項目集中在不完整的行？-css教學-PHP中文網

如何防止 Flexbox 項目集中在不完整的行？

DDD

發布： 2024-11-19 17:27:03

原創

646 人瀏覽過

How to Prevent Flexbox Item Centering on Incomplete Lines?

如何防止 Flexbox 專案居中於斷線？

在 Flexbox 中，如果您有一個柔性容器，其中包含不適合的項目在其寬度內均勻地排成一行，該行上的其餘項目居中。但是，如果您希望其餘項目從左側開始並具有相等的間距，就像整行上的項目一樣，該怎麼辦？

解決方案：使用「幽靈」元素

無需使用JavaScript，您可以建立空元素（稱為「幽靈」元素）來填充不完整行上的剩餘空間。

例如，如果您的容器的潛在列長度為 4，您將需要 3 個幽靈元素。您可以將這些添加到 HTML 的末尾：

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

登入後複製

更新的 CSS：

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

登入後複製

這可確保幽靈元素佔據與實際卡片。

使用偽卡片元素

您也可以利用CSS 偽元素來減少所需的幽靈元素數量：

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

登入後複製

這會為每張佔據其位置的空卡創建一個偽元素。不完整的線。透過以 2 個偽元素取代 2 個 Ghost 元素，對於 4 的列長度，您只需要 1 個實際的 Ghost 元素。

範例程式碼：

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

登入後複製

透過使用幽靈元素或偽元素，可以防止 Flexbox 專案以不完整的線條為中心，並確保排列更加美觀。

以上是如何防止 Flexbox 項目集中在不完整的行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！