特別是用justify-content: start -我不希望右邊有多余的空間。

對齊-內容:居中:

對齊-內容:開始:

如何使用Flex獲得如下顯示？ 注意: 差距標準化為20px。

& quot喂& quot在圖像中居中。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 35px;
  background-color: grey;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* issue */
  gap: 20px;
  border: 1px solid red;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  width: 50px;
}

<div class="container">
  <div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
  </div>
  <p>Hello</p>
</div>

最簡單的方法是使用CSS-Grid和自動適應或自動填充與minmax的組合。它將根據需要創建盡可能多的列，以適應最小寬度，同時自動調整元素的寬度以適應剩余空間:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 20px;
  border: 1px solid red;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}

<div class="container">
  <div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
    <div class="box">Box 9</div>
    <div class="box">Box 10</div>
    <div class="box">Box 11</div>
    <div class="box">Box 12</div>
    <div class="box">Box 13</div>
    <div class="box">Box 14</div>
    <div class="box">Box 15</div>
    <div class="box">Box 16</div>
    <div class="box">Box 17</div>
    <div class="box">Box 18</div>
    <div class="box">Box 19</div>
    <div class="box">Box 20</div>
  </div>
  <p>Hello</p>
</div>