0

I am trying to center flex items within a flexbox with wrap so that the rows with most items are centered, but the other rows with less items also start at the same length.

This is the idea: Idea

The problem is that if justify-content: center; makes the row with less items start at a different length. Problem

the code:

.container {
  display: flex;
  flex-wrap: wrap;
  background: orange;
  gap: 0.5rem;
  padding: 1rem;
}

.container > div {
  height: 150px;
  width: 150px;
  background: purple;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

codepen

I tried wrapping the container inside another div with display: flex; and justify-content: center; but the container took up all the space in the parent div.

Diego D
  • 6,156
  • 2
  • 17
  • 30
Brandon
  • 1
  • I put your code in a snippet.. the html added happens to coincide with the codepen but it was just the natural html given by those css rules. Anyway I'm not sure to understand the problem. Your flex container wraps the items correctly since the beginning with no further justify content. Isn't that what you expected? – Diego D Jan 21 '23 at 11:30
  • I think the answer you're looking for is here https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items – Damzaky Jan 21 '23 at 11:48

0 Answers0