Flexbox justified and offset/staggered

[Chasew]

How would something like this be accomplished with flexbox (and maybe a bit of other trickery)?

I know it’s possible, because I just did it! About an hour ago – completely by accident. I thought ‘oh that’s nice, but not what I want…’.

Well now I want it, and I can’t figure out how the hell I did it :)

Story of my life…

Basically, the boxes should be justified from left to right, but also distributed evenly from top to bottom of the window. And that vertical distribution should force the boxes to overlap if need be.

I’m still tinkering with Flexbox through trial and error and apparently know just enough to be dangerous…

Maybe it was some strange way of keeping them in columns, but allowing the columns to wrap?

Here’s my not-working example:
http://codepen.io/chasebank/pen/gpmJbx

[Paulie_D]

Getting the offset with flexbox was simple enough, but the rest was just negative margins which feels a little dirty to me.

http://codepen.io/Paulie-D/pen/RPpzEm?editors=010

[thejase]

Nope, negative margins are your friend, indeed. This is exactly why they exist.

[Author]

Posts