有沒有辦法在 css 中將 flex-start 與 center 結合起來

Question

如果我做justify-content: center; 卡片居中，但如果卡片數量不是偶數，它看起來很粗糙。 所以，我做了justify-content: flex-start; 現在我需要在左對齊時將它們居中，我不想要負空間，是否可以使用 flexbox 這樣做？

<section>
  <div class="wrap">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</section>
    
section {
  width: 100%;
  display: flex;
  justify-content: center;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  justify-content: flex-start;
}

.card {
  width: 300px;
  height: 200px;
}

想要這樣：

而不是這個：

Answer 1

考慮網格：

 * { margin: 0; padding: 0; box-sizing: border-box; } section { width: 100%; display: flex; justify-content: center; }.wrap { display: flex; flex-wrap: wrap; width: 80%; justify-content: center; }.consider_grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 10px; }.card { background-color: pink; width: 300px; height: 200px; }

 <section> <div class="wrap"> <div class="consider_grid"> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> </div> </section>