Is there a way to combine flex-start with center in css

Question

If I do justify-content: center; cards are centered, but it looks quite rough if there aren't an even number of cards. So, I did justify-content: flex-start; and now I need to center them while are aligned left, I don't want the negative space, is it possible to do so with 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;
}

Want it like this:

Instead of this:

score 1 · Answer 1 · answered Sep 01 '22 at 15:43

Consider grid:

* {
  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>

Thanks for your answer! I'm looking for a flexbox solution for the problem tho, but don't think there is one now — betty_, Sep 01 '22 at 20:17

Is there a way to combine flex-start with center in css

1 Answers1