CSS Flexbox: Center container with left-justified elements [duplicate] - html

Question

This question already has answers here:
Flex-box: Align last row to grid
(35 answers)
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I've set up a short demo here: codepen.io. I have a flexbox with a number of boxes in it. I've set the minimum width of the container to be 3 boxes, and the maximum to be 4. It works, but I'd like the last element to be left justified, instead of floating in the middle. Any way I can left-justify the elements and simply center the container?
CSS code for the container is here, where the width/height of one box is 100px:
.container {
padding: 1em;
display: flex;
flex-wrap: wrap;
min-width: calc(300px + 6em);
max-width: calc(400px + 8em);
align-items: center;
justify-content: center;
margin: 0 auto;
background: red;
}
Thanks!
Edit: The solution I'm looking for is not as simple as making the last item align to grid; more specifically, I would like the screen width to be dynamic, so the container elements are always horizontally centered and flush with their container.

Answer 1

Use margin-right: auto; on your last item (using :last-child) to add a margin that will push your box to the left:
.container {
padding: 1em;
display: flex;
overflow: auto;
flex-wrap: wrap;
min-width: calc(300px + 6em);
max-width: calc(400px + 8em);
align-items: center;
justify-content: center;
background: red;
}
.box {
width: 100px;
height: 100px;
background: #000;
margin: 1em;
display: block;
}
.box:last-child { margin-right: auto; }
<h1> try resizing window</h1>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Answer 2

I changed the justify-content to "flex-start" using Chrome's "Inspect" function.
That seemed to produce the results that you want.