Flexbox in complex layout

[jonnycraze]

I’m basically stumped at this point on a flexbox issue with a more complicated layout.

Its kind of like Masonry but the widths can be variable.

The key requirement is that it must remain a single

<

ul>

http://codepen.io/jonnycraze/pen/pywyeG

In the code sample provided, Ice Cream should be flush against Cookies (it should move up). My expectation is then that Jelly Beans will slide left, and the following items will be on the right side of it

[bearhead]

The simple answer is that you will need masonry to achieve that layout (I believe masonry has an option for variable widths). There are ways to “fake” the look of masonry using just html and css, but the layout will be pretty inflexible.

[Author]

Posts