在不影响居中兄弟的情况下附加弹性项目

Posted 2023-01-06

我正在尝试在项目网格的末尾添加一个操作按钮。不足之处在于按钮元素不能影响项目的居中，但必须像它是网格的一部分一样必须断开-只是偏移。

我创建了一个demo说明了关闭方法。

.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>

我正在尝试在项目网格的末尾添加一个操作按钮。问题是按钮元素不能影响项目的居中，但必须像它是网格的一部分一样断裂-只是...

答案

我不相信纯CSS可能。