Append 彈性項目而不影響居中的同級

Question

我正在嘗試在項目網格的末尾添加一個操作按鈕。 問題是按鈕元素不能影響項目的居中，但必須像它是網格的一部分一樣斷開 - 只是偏移。

我創建了一個演示關閉方法的演示。

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.button {
  margin-right: -120px;
  width: 120px;
}

這里在尾隨按鈕上使用負邊距，項目正確居中，但是按鈕溢出容器並且不會正確地換行。

有誰知道這種布局的聰明方法？ 甚至可以用純 css 嗎？

 * { box-sizing: border-box; }.flex-container { padding: 0; margin: auto; list-style: none; display: flex; flex-flow: row wrap; justify-content: center; max-width: 800px; }.flex-item { border: 1px solid yellow; background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; }.button { margin-right: -120px; width: 120px; height: 150px; font-size: 2em; background: teal; }

 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li class="flex-item">6</li> <span class="flex-item button">Button</span> </ul>

Answer 1

我不相信純 CSS 是可能的。

1. 居中是通過容器中自由空間的分布來實現的。 附加到最后一項的按鈕元素將占用空間。 因此，它將影響其兄弟姐妹的居中。

2. 如果您選擇使用絕對定位將按鈕從文檔流中移除，它將不再占用容器中的空間，並且不會影響其他 flex 項的居中。 但是，它也將停止包裝，因為它將失去與兄弟姐妹的關聯。