Как центрировать элемент в гибком контейнере, но только когда он перемещается на новую строку?

Question

У меня есть контейнер с текстом слева и кнопкой справа. Когда они находятся на одной строке, я хотел бы использовать justify-content: space-between, но когда кнопка нажимается на новую строку (из-за меньшего размера экрана), я бы хотел, чтобы кнопка была отцентрирована. Есть ли способ сделать это без использования медиазапросов, так как языковой стандарт изменяет размер кнопки, и поэтому кнопка перемещается в новую строку на экранах другого размера.

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

Answer 1

Как это ?

Измените ширину браузера, чтобы эмулировать устройства меньшего размера.

Трюк

Поля влево и вправо установлены на кнопку авто на кнопке.

код

HTML

<div class="container">

  <p class="text">Blasdfasdflasdf asdf asdf asdf asdf
  </p>

  <a class="button">
    Submit
  </a>

</div>

CSS

.container {
  background: red;
  width: calc( 100% - 40px );
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
}

.text {
  max-width: 700px;
  width: 100%;
  background: blue;
  padding: 20px;
  margin: 0;
}

.button {
  background: pink;
  max-width: 700px;
  width: 100%;
  padding: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}