使用Flexbox在一行中显示两个按钮并控制对齐方式

Question

假设我有一些按钮，我想要每行两个的方式显示这些按钮。我不确定如何以特定的宽度将这些按钮分成两列，并控制它们的对齐方式：左对齐、居中或右对齐。期望的结果应该是这样的：

.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>

- deathknight256

---

为什么不用两个容器，每个容器里放两个按钮？ - Temani Afif

@TemaniAfif 因为按钮可能是4个、6个或8个，并且有一些现有的自定义选项，比如反向显示。 - deathknight256

所以请在您的问题中添加此细节，因为它很重要。处理4个按钮很容易，但如果数量是动态的，则不是这样。 - Temani Afif

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>

- yinsweet

Answer 2

你可以给子元素添加 flex: 0 50%。这样可以强制将两个项目排列在一行上。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 20rem;
  /* Aligning elements left, center and right in flexbox */
  /* float: left; */
  margin: auto;
  /* float: right; */
}

.button {
  border: 1px solid red;
}

.container>button {
  flex: 0 50%;
}

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

- Penny Liu