如何在 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中文网其他相关文章！