Center a group of wrapped flex items

Question

I am trying to focus a group of wrapped flex items. HTML looks like this:

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Run codeHide result

Demo

The above is as follows:

The green rectangles are wrapped correctly, but they are generally not centered in the red area,

without defining the width on .container, because the red block can be of any size, and I want to put as many blocks as possible next to each other.

Any suggestions on centering wrapped green blocks?

UPDATE: Accordingly , a 2 year post is not possible. So in my case, I have to use javascript to fix this. But maybe I can use CSS Grid Layout

Answer 1

,

, :

1: .container

• justify-content: center; .container

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Hide result

2: .container

• width + margin:auto .container

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 78.5%;
  margin: auto;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Hide result

3:

main {
  background-color: blue;
  width: 390px;
  display: flex;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
  justify-content: center;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Hide result

Answer 2

, , .

    main {
        background-color: blue;
        width: 390px;
        display: flex;
        justify-content: center;
    }
    
    .container {
        background-color: red;
        display: inline-flex;
        flex-wrap: wrap;
        width:306px;
    }
    
    .a1 {
      color: grey;
      width: 100px;
      height: 200px;
      background-color: green;
      border: 1px solid black;
    }

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

Hide result