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