有没有办法在 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>