如何在 CSS 網格佈局中將最後一行項目置中？

如何實現CSS Grid 最後一行居中對齊

使用CSS Grid 佈局元素時，實現起來比較困難由於網格軌道的性質，最後一行居中對齊。然而，flexbox 為此類對齊要求提供了更合適的解決方案。

要將最後一行項目水平居中對齊，請將flexbox 屬性應用於容器元素：

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

flex -wrap：wrap屬性允許項目在必要時流入多行，而justify -content：center將所有項目相對於整個水平方向打包

接下來，設定單一項目的Flex行為：

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

這裡，flex: 0 0 calc(16.66% - 20px) 指定物品的尺寸並確保所有項目都大小相等。 box-sizing：為了精確計算，應包含 border-box。

因此，項目將均勻分佈在各行中，並且由於 justify-content: center 屬性，最後一行將居中。這種方法消除了 CSS 網格的限制，並提供了一種靈活的解決方案，可以將任意數量的元素的最後一行項目居中。

以上是如何在 CSS 網格佈局中將最後一行項目置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！