CODEWITHSUNDEEP
htmlcss
user3607282
user3607282

Reputation: 2555

Even distribute divs with a fixed size

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. enter image description here

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.

enter image description here

Upvotes: 7

Views: 463

Answers (3)

Shaggy
Shaggy

Reputation: 6796

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.

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105933

If i refer to screen shot and everyone idea, flexbox is here to help you (I was expecting feed back from my comments actually about http://jsfiddle.net/bvgn46hu/108/ & 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

Upvotes: 0

Marco Hengstenberg
Marco Hengstenberg

Reputation: 864

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 bugs and you would have to dive in deep to make it work across browsers consistently – browser support gets worse when you don't tinker with the syntax on top of it, so let's assume:"There is no Flexbox!").

The solution to your problem at hand would be pretty straight forward 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 that solve the issue?

Upvotes: 0

Related Questions