_x000D_ _x000D_ _x000D_ This question already has an answer here:_x000D_ _x000D_ _x000D_ Flex-box: Align last row to grid_x000D_ _x000D_ 25 answers_x000D_ _x000D_ _x000D_ _x000D_ Targeting flex items on the last or specific row_x000D_ _x000D_ 3 answers_x000D_ _x000D_ _x000D_ _x000D_ _x000D_ 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.