如何将元素居中放置在flex容器中，但仅在将其推到新行时才居中？

Question

我有一个容器，该容器的左边有一些文本，右边有一个按钮。当它们在同一行上时，我想使用justify-content: space-between，但是当按钮被推到新行时（由于屏幕较小），我希望按钮居中。有没有一种方法可以在不使用媒体查询的情况下进行操作，因为语言环境会更改按钮的大小，因此按钮会在不同的屏幕大小下被按到新行。

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

Answer 1

喜欢this吗？

调整浏览器宽度的大小以模拟较小的设备。

把戏

按钮上的左右边距设置为自动。

代码

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;
}