Согните, чтобы игнорировать боковое поле при центрировании элементов

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 для обоих, чтобы вы могли сохранить 20 пикселей между кнопками по горизонтали и 5 пикселей между ними вертикально, когда они обертывают.

Чтобы избежать слишком раннего переноса , вы можете использовать отрицательные поля на элементе контейнера 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;
  }
}