How to create this layout within flexbox (no div wrapping etc.)?

Hey guys,

this goes to all flexbox-game winners out there.

I was currently experimenting with some layout using only flexbox.
Now here is what i want to achieve and what i got so far:

Now my problem is, that the element in the lower right is not aligning within that “masonry layout”, but aligns itself too low next to the 2nd last element.

Anyone got an idea how to fix that within only using flexbox and without nesting all elements within divs? (i dont want that cause i want to have control over all elements over the viewports etc.).

Thanks in advance, happy flexboxing,

Daniel


Live link:
http://danielsandbox.webflow.io/

Public Link:
https://preview.webflow.com/preview/danielsandbox?preview=43a753b4a46132c1615b32862e374502

Crappy me…got a solution with positioning the last element absolute in the lower right corner…but if thats a nice “semantic” solution…i dont know :stuck_out_tongue_winking_eye:

You’ll need to wrap and nest certain elements. so the top 2 would be wrapped. Then below that the left 2 get wrapped. Then you wrap that wrapper with the box below it. Then that wrapper get wrapped with the last box that’s giving you trouble.

Yeah but then I cant mix elements and/or put them e.g. on tablet mode next to each other, when they are wrapped within a div wrapper.

I got it with putting 5 elements on flex and the last one in the lower right corner gets flex AND another class with position absolute. then it sits there nicely.

plus i then can mix and change the order on tablet or mobile mode however i want.

:slight_smile:

http://danielsandbox.webflow.io

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.