Center align HTML Elements, while adding new items from left - html

Question

I have a parent div containing an unknown number of smaller divs that are used like large icon-like buttons. If a row of child divs is full, I would like them to have equal margins on each side (ie. centered), but if a row is not full I would like them to be filled in from the left side (but still in columns with the elements above). Is there a way to do this with CSS? Resizing the window should maintain the centering and add/remove columns as necessary. All the child div widths are known.
Here's a crappy image of the behavior I'm trying for:

Answer 1

Okay I figured out a solution for this that both allows for equal margins and ALSO aligns divs left in the last row. The caveat is that it uses hidden elements, so the container is taller than the visible elements it contains.
Also it adds a bunch of extra markup to your code. If I thought of any other way to do this, I would do it differently. Sorry.
JSFiddle: https://jsfiddle.net/88qadmo3/2/
#container > div {
margin: 10px;
width: 100px;
height: 100px;
}
.floatleft {
background-color: red;
}
.invis {
visibility: hidden;
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #DDDDDD;
}
.clearfix {
clear: both;
}
<div id="outer">
<div id="container">
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
<div class="invis"></div>
</div>
</div>

Answer 2

You can do this by wrapping each of the child elements in an element and using CSS media queries to change the size of the wrappers. Then, just use % width on the wrappers based on what you want the column sizes to be.
When you run the example, shrink it to <400px so you can see it move from 6 columns to 3 (you'll need to run the code snippet on a full-page to see this).
.parent {
border: 2px solid red;
}
.child {
width: 100px;
display: block;
margin: 0 auto;
border: 1px solid black;
}
.wrapper {
display: inline-block;
text-align: center;
float: left;
width: 16.66%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clear {
clear: both;
}
#media (max-width: 800px) {
.wrapper {
width: 20%;
}
}
#media (max-width: 600px) {
.wrapper {
width: 25%;
}
}
#media (max-width: 400px) {
.wrapper {
width: 33.33%;
}
}
<div class="parent">
<div class="wrapper">
<div class="child">1</div>
</div>
<div class="wrapper">
<div class="child">2</div>
</div>
<div class="wrapper">
<div class="child">3</div>
</div>
<div class="wrapper">
<div class="child">4</div>
</div>
<div class="wrapper">
<div class="child">5</div>
</div>
<div class="wrapper">
<div class="child">6</div>
</div>
<div class="clear"></div>
</div>

Answer 3

Just use float left, and items of the width (the original fiddle):
<div class="container">
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
<div class="item">Cats</div>
</div>
.container {
overflow: auto;
}
.item {
width: 50px;
float: left;
margin: 0 10px;
}