How to properly align an item gallery with flexbox?

Question

I’m starting to use CSS flex, and I realized that when we centralize a container, it looks like the elements inside the container seem to be centralized, but if I align it to the right, the container loses centralization:

Left aligned (I have the problem with a large space on the right):

Aligning to the center, I have a problem with the centralized elements:

CSS:

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

.item {
    max-width: 136px;
    flex: 1 0 136px;
    margin: 0 5px 20px;
}

This is the example above. And that’s not quite it that I want.

Using float, I could still make one screen alignment.

Answer 1

Use an internal wrapper,

.container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.container-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: calc(146px * 3)
}

.item {
  max-width: 136px;
  flex: 1 0 136px;
  margin: 0 5px 20px;
}

<div class="container">
  <div class="container-inner">
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
    <div class="item">
      <img src="http://placekitten.com/136">
    </div>
  </div>
</div>

#Obs: you can remove the Calc from css, it was only for display, flex will do it automatically

#Edit: container aligned in the center, still can remove the Calc from the .container-inner will work the same way, the concept remains the same.. I hope I’ve helped