使用 Flexbox 和控件对齐方式显示一行中的两个按钮

Question

假设我有按钮，我想连续显示这些按钮2个。我不知道如何连续显示具有特定宽度的按钮 2 并控制将它们显示在左侧、中间或右侧。想要的结果是这样的：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.button {
  width: 190px;
  border: 1px solid red;
}

<div class="container">
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>
  <button class="button">4</button>
</div>

Answer 1

可以设置容器的宽度吗？然后将 margin-left/margin-right 设置为 auto 来对齐按钮？

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.button {
  width: 190px;
  border: 1px solid red;
}

<div class="container">
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>
  <button class="button">4</button>
</div>