我正在構建一個表單，其中字段的寬度百分比由客戶端動態設置。 我的第一個方法是創建一個啟用了換行的flex容器，并使用gap: 16px均勻地分隔字段。令我驚訝的是，flex-wrap和gap的表現并不像我預期的那樣。

main {
  width: 400px;
  background-color: gray;
  
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

div {
  background-color: blue;
}

.first {
  width: 50%;
}

.second {
  width: 50%;
}

<main>
  <div class="first">First</div>
  <div class="second">Second</div>
</main>

這個帖子有答案。 https://wiryawanadipa . com/blog/calculate-percentage-width-of-flex-items-when-use-gap/

解決方案是基于每行的項目數量和間隙大小的公式:

寬度:calc((100%/n)-(((n-1)/n)* g))；

其中[n =每行的項目數]和[g =間隙的大小]

:root {
    --flex-gap: 1rem; /* Variable for gap */
}

*,
*::after,
*::before {
    box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-gap);
}
.item {
  --flex-items: 1; /* Variable for number of items */
  width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
  padding: 3rem 1rem;
  background-color: #999;
  color: white;
  font-size: 28px;
  text-align: center;
}
@media (min-width: 520px) {
  .item {
    --flex-items: 2; /* Variable for number of items */
  }
}
@media (min-width: 768px) {
  .item {
    --flex-items: 3; /* Variable for number of items */
  }
}
@media (min-width: 1200px) {
  .item {
    --flex-items: 4; /* Variable for number of items */
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>