Even distribute divs with a fixed size

Question

I went through a couple of similar questions but the answers didn't work for me.

I have several divs, and each of them has a fixed width of 210px.

The container they're in can resize depending on the screen size of the user. The divs have to be evenly spaced horizontally at all time and it should also break the line of divs into another line if there is no space.

To clear things up more, refer the figure below.

This JS fiddle has achieved the outcome I want. But I can't see how it'll work for my divs which must have a fixed width.

width: calc(100% / 6);

EDIT:

The problem with the JS Fiddle is that when the screen size is where it has space, but not enough space to fit another div. In which case, the last div should be closer to the right.

Answer 1

Flexbox can do what you want by setting justify-content to space-around (or space-between, depending on your presentational needs). Here's a quick example:

body{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  margin:0;
  padding:5px;
}
div{
  background:#000;
  flex:0 0 210px;
  height:210px;
  margin:5px;
  width:210px;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Check caniuse.com for details on browser support and prefixing.