如何将元素仅置于响应式网格布局的最后一行居中？

将元素放在最后一行居中：CSS 网格与 Flexbox

困境：
当使用 CSS 网格来对齐项目中的项目时均匀分布的网格，如何将元素单独放在最后一行居中，同时容纳任意数量的元素项目？

不适合 CSS 网格：
CSS 网格不适合在整行或整列上对齐项目，因为纵横交错的轨道会阻碍所需的效果。

替代方案：Flexbox
要实现所需的居中，请考虑使用 Flexbox调整内容：居中。这会将项目水平打包在行的中心，而边距将它们分开。

机制：
在整行上，justify-content 不起作用，使项目完全对齐没有可用空间是合理的。但是，在具有可用空间的行（即最后一行）上，项目将居中。

示例：

CSS：

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

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

* {
  box-sizing: border-box;
}

HTML:

<div>

结果:
与通过这种方法，最后一行上的项目将居中，同时布局保持对不同数量的项目的响应。

以上是如何将元素仅置于响应式网格布局的最后一行居中？的详细内容。更多信息请关注PHP中文网其他相关文章！