How to get tiles centered and left-justified at the same time

Question

I have a container of tiles (or divs) and I want the container to be centered, while the tiles are left justified in the container.

so if the window is small:

<

Answer 1

This is pretty easy with flexbox.

.container { display: flex; flex-wrap: wrap; }

You can customize how the tiles fit as well, such as giving them a starting point (flex-basis) or how much the tile can grow or shrink

.tile { flex-grow: 0; flex-shrink: 0; flex-basis: 3em;

Check out the codepen: http://codepen.io/anon/pen/uexbf