如何防止 Flexbox Wrap 在較小的螢幕上將最後一個元素居中？

Flexbox 換行：自訂元素放置

在 Flexbox 中，控制元素的換行行為對於實現所需的佈局至關重要。為了解決問題中描述的問題（螢幕縮小時最後兩張卡片居中而不是向左對齊），我們可以採用多種技術。

1.幽靈元素：

一種方法是建立「幽靈」元素來填滿最後一行的空白。例如，如果我們期望最多四列，我們可以引入三個空 div 作為幽靈元素。這可確保元素從左側換行，在多行上均勻對齊。

2.偽元素：

另一個選擇是利用偽元素（:before 和 :after）。在實際元素之前和之後添加空 div 有效地將所需的幽靈元素數量減少了兩個。此方法還可以防止最後一行出現任何視覺幹擾。

實作：

在提供的程式碼中，我們可以如下修改CSS 以實現所需的行為：

.card {
  /* Styles for the card elements */
}

.card:empty {
  width: 300px; /* Width of empty card */
  box-shadow: none; /* Remove box-shadow for empty cards */
  margin: 2rem; /* Keep empty cards aligned with actual cards */
  padding-bottom: 0; /* Remove padding for empty cards */
}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

在HTML 中，我們加入必要的Ghost elements:

<div class="container">
  <div class="recipe-grid">
    <!-- Actual card elements -->
    <div class="card">
      <!-- Card content -->
    </div>
    <!-- ... more card elements -->
    
    <!-- Ghost elements -->
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

這種方法可確保卡片從左側換行，只要螢幕寬度需要，就從新行開始。幽靈元素佔據最後一行的剩餘空間，將卡片均勻地跨多行對齊。

以上是如何防止 Flexbox Wrap 在較小的螢幕上將最後一個元素居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！