1

Is there a possibility or a workaround, that elements are floated left when I've something like a grid done with flexbox and justify-content: space-between?

Here is my code/demo, what I mean:

#wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#wrapper div {
  width: 19%;
  background: #ccc;
  height: 50px;
  margin-bottom: 20px;
}
<div id="wrapper">
  <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>

This first 10 boxes are okay, I want to have something like this grid, but the last ones should take place next to each other and not with this lots of space between.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Sukrams
  • 127
  • 9
  • I don't think it can work. In the [original article](https://css-tricks.com/filling-space-last-row-flexbox/) you'll note that `space-between` is not used. Add margins and then it will work. On a related note, don't use `background` to specify the `background-color` (more on that [here](https://csswizardry.com/2016/12/css-shorthand-syntax-considered-an-anti-pattern/)). – Andrei V Mar 09 '17 at 13:35
  • Thanks. I'll check this. the "problem" is I want to have it easily and clean and not 4 or 5 things just for the margins, I hoped there will be a nice solution with flexbox ;) – Sukrams Mar 09 '17 at 15:14

1 Answers1

0

try something like this:

#wrapper {
  display: flex;
  flex-wrap: wrap;
 
}

#wrapper div {
  width: 19%;
  background: #ccc;
  height: 50px;
  margin-bottom: 20px;
  margin-left:5px;
}
<div id="wrapper">
  <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>
Hemant
  • 1,961
  • 2
  • 17
  • 27