Even distribute a fixed size div

Question

I went through a couple of similar questions, but the answers did not work for me.

I have multiple divs and each one has a fixed width of 210px.

The container in which they reside may resize depending on the size of the user's screen. Sections should be evenly spaced horizontally at any time, and should also split the line divs into another line if there is no space.

To clarify the situation, see the figure below.

This JS script achieved the result I want. But I do not see how this will work for my divs, which should have a fixed width.

width: calc(100% / 6); 

EDIT:

The problem with JS Fiddle is that when the screen size takes place, but there is not enough space to set another div. In this 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 presentation needs). Here is 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 prefix.

Answer 2

http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

So here is an article explaining how to achieve visual layouts without using Flexbox (which comes with a lot of errors, and you have to dive in depth for it to work in browsers consistently - browser support gets worse when you don't mess with the syntax from above, so let's say : "No Flexbox!"). A.

Solving your problem at hand would be fairly simple without Flexbox:

 .container { padding: y%; /* by giving the container a percentage based padding, you will create a slowly upscaling container as screen-width increases */ } .box { width: 210px; /* whyever they need a fixed width but ok, who knows */ margin-right: x%; /* x should be replaced with a value that distributes your containers evenly across the screen and makes them wrap when needed. Fiddle with the value until it makes sense to you. */ } 

Does this solve the problem?

Answer 3

If I turn to the screenshot and each idea, flexbox is here to help you (I expected that the feedback from my comments is actually about http://jsfiddle.net/bvgn46hu/108/ and http://jsfiddle.net / bvgn46hu / 114 / )

 #container { margin:1em; color:turquoise; display:flex; flex-wrap:wrap; border: solid; padding:2vh; align-items:center; justify-content:space-between; } #container > div:before { content:'boxe '; padding-right:0.25em;; } #container > div { display:flex; align-items:center; justify-content:center; min-height:25vh; border: solid; margin:1vh 0; width:400px; min-width:calc(100vw / 4); max-width: 45%; } 

 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 

codepen to play with