Flexbox margin between boxes

Question

I know margins between flexboxes can be set automatically thanks to the the align-content property, but I need it to be fixed margin set in px. I am looking for something similar to column-gap for multi-columns.

Here is what I need to do:

demo

Here the space between 1,2,3 and 4,5 is equal, let’s say 30px. Any idea?

Have you looked at: http://stackoverflow.com/questions/20626685/is-there-any-better-way-to-control-distance-between-flexbox-items-than-margin ? — Hashem Qolami, Oct 02 '14 at 21:55
Thank you but I need it to work on several lines, with an undefined number of colums — 1213, Oct 02 '14 at 21:59
have a look at my answer, maybe it will help. http://stackoverflow.com/a/41033768/1204902 — Tunasing, Dec 08 '16 at 07:23

bpierre · Accepted Answer · 2014-10-02T22:39:03.430

A solution could be to use margins, and negative margins on the container (which requires an extra wrapper).

Demo: http://jsbin.com/gozup/1/edit?html,css,output

HTML

<wrapper>
  <container>
    <column>1</column>
  </container>
</wrapper>

CSS

wrapper {
  overflow: hidden;
  width: 250px;
}
container {
  display: flex;
  flex-wrap: wrap;
  margin: -25px;
}
column {
  flex: 0 1 50px;
  height: 50px;
  margin: 25px;
}

Flexbox margin between boxes

1 Answers1