用 flexbox 和控制 alignment 连续显示两个按钮

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>

Answer 2

您可以将flex: 0 50%赋予子元素。 它可以强制它每行安排 2 个项目。

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