如何將 Flexbox 網格的最後一行與「justify-content: space- Between」均勻對齊？

Flex-Box：將最後一行與網格對齊

在Flex-box 版面配置中，將最後一行中的項目與其他項目對齊可能會帶來挑戰。使用 justify-content: space- Between; ，調整網格的大小可能會導致對齊失敗。

為了解決這個問題，出現了一個簡單而優雅的解決方案：

使用 ::after

加上一個 ::after偽元素來自動填滿剩餘空間：

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

如何實現工作原理：

::after 偽元素創建一個虛擬元素來填充網格中的空白空間。透過給它 flex: auto; ，它會自動調整以適應。因此，無論網格大小如何，最後一行項目都會無縫對齊，並且無需修改 HTML 結構。

有關現場演示，請參閱此處提供的 CodePen 範例：http://codepen.io/DanAndreasson/pen /ZQXLXj

以上是如何將 Flexbox 網格的最後一行與「justify-content: space- Between」均勻對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！