如何將元素僅置於響應式網格佈局的最後一行居中？

將元素放在最後一行居中：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中文網其他相關文章！