居中时可以忽略边距

Question

在包裹时，我很难将其弯曲到中心元素（带有边距）。

宽屏时看起来很完美

但是它在换行时并没有居中（因为第一个按钮的右边距）

这是我的代码：https://jsfiddle.net/dLz7120k/2/

footer { display: flex; flex-flow: row wrap; justify-content: center; }
button { margin: 0 20px 10px 0; }
button:last-child { margin-right: 0; }

有没有办法使它在换行时忽略第一个按钮的右边距？
（我不想更改按钮之间的间距，也不想在第一个/最后一个按钮之前/之后添加不必要的边距）

Answer 1

在button元素之间

将边距分开-将两者都设为margin: 5px 10px，以便您可以保留包装时，水平按钮之间为20px，垂直按钮之间为5px。

为避免包装太早，您可以在footer容器元素上使用负边距来调整导致此的边距早期包装（感谢LGSon指出了这一技巧）。参见下面的修改后的演示：

* {
  font-size: 18px;
}
#modal {
  margin: 10%;
  padding: 15px;
  width: 50%;
  border: 1px solid blue;
}
p {
  text-align: center;
}

footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 -20px; /* extend by this amount on both sides */
}
button {
  margin: 5px 10px; 
}

<div id='modal'>
  <p>Some text and some paragraph</p>
  <footer>
    <button>Cancel</button>
    <button>Continue</button>
  </footer>
</div>

Answer 2

当屏幕环绕时，您必须为屏幕的宽度编写@media样式，然后在其中删除空白处的空白。

例如

@media screen and (max-width: 768px) {
  button {
    margin: 0 0 10px;
  }
}