flex 排滿自動換行 - daniel-qa/Vue GitHub Wiki

flex 排滿自動換行

你只需要在父層容器上設定兩個關鍵的 CSS 屬性：

display: flex;

flex-wrap: wrap;

然後，再為子項目設定你想要的寬度。

/* 設定父層容器為 Flexbox，並允許換行 */
.quota-list-container {
  display: flex;
  flex-wrap: wrap; 
  /* 這裡可以選擇性地加上間距，讓子項目之間有空間 */
  gap: 20px; 
}

/* 設定每個子項目的寬度 */
.service-item-card {
  /* 這裡設定你想要的寬度，當一行空間不夠時，它就會自動換行 */
  width: 300px; /* 範例：固定寬度 */
  
  /* 如果你希望寬度是百分比，例如一行放三個，可以這樣設定 */
  /* width: calc(33.33% - 20px); */ 
  
  /* 這裡可以放你原本的其他樣式，例如邊框、內距等 */
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}