Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox justified and offset/staggered

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #203223
    Chasew
    Participant

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

    Flexbox Shenanigans

    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

    #203233
    Paulie_D
    Member

    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

    #245618
    thejase
    Participant

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.