Center A Group Of Wrapped Flex Items

I'm trying to center a group of wrapped flex items. The HTML looks like this: DEMO The above looks like this: The green boxes are wrapped correctly, but they, as a whole, are not

Solution 1:

Not sure what kind of centering you want do

So a few options:

Option 1: just center the elements in .container

• add justify-content: center; to .container instead

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><divclass="container"><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div></div></main>

Option 2: center the .container

• add some width + margin:auto to .container

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

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

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

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

Option 3: center both from above options

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><divclass="container"><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div></div></main>

Solution 2:

If you just want to center the container give a fixed width to the container or make sure that the width of the container has the expected width.

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><divclass="container"><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div></div></main>