Comments on: Squeezy Stretchy Flexbox Nav

By: Chris Mounsey

Chris Mounsey — Sat, 25 Feb 2017 20:53:37 +0000

This works well on Chrome, but the shrinking back down does not work on Safari 10.0.3.

I haven’t investigated the reason, but I have found that Safari tends to be a bit snippy about cascading Flexbox—so it might be related to that.

By: Samantha

Samantha — Thu, 23 Feb 2017 14:18:17 +0000

Thanks for showing us how you’d build something cool that you found on the web! I find that reading articles like these helps make me a better designer and coder. Taking things apart and rebuilding them is the best way to figure out how and why they tick – and every time I read an article like this, I grow! Thank you for finding this cool navigation, and taking the time to show us how to make our own. I think this is AWESOME!

By: Michael

Michael — Thu, 23 Feb 2017 08:49:23 +0000

In reply to alxscms.

I’m with alxscms – they aren’t unusable – but they are trickier to use. It’s a bit jarring how the page content moves too (if you have scrolled). It’s a really cool demo of what can be done with Flexbox, but not sure about it from a usability point of view.

By: Zlatko Zlatev

Zlatko Zlatev — Tue, 21 Feb 2017 16:25:14 +0000

In reply to Neil. If I remember correctly in Bootstrap 3, they tackled that using the scrollHeight of the zero-height container. Not css-only solution though.

By: Doug Reeder

Doug Reeder — Tue, 21 Feb 2017 16:13:14 +0000

Technically very nice, but I don’t see how the stretching actually improves the usability. If the menu items are tall enough to hit accurately, they don’t need to be any taller. Maybe they could stretch between a “useable” size and a “better” size? That is, have an upper limit to the stretching.

By: Chris Coyier

Chris Coyier — Tue, 21 Feb 2017 14:45:44 +0000

In reply to alxscms. I see what you mean about the toggle menu (sometimes) moving when you open a submenu. I'm not sure that makes them "actually unusuable".

By: Neil

Neil — Tue, 21 Feb 2017 13:11:03 +0000

Great idea! Might put this to use if I come across a project where it may fit in.

Really looking forward to your article on animating to an unknown height. It’s an issue I have hit several times and it’s super annoying.

By: alxscms

alxscms — Tue, 21 Feb 2017 09:02:20 +0000

It’s a cool demo of what can be achieved with flex but the submenus as they are are actually unusable since the toggle button is moving when you click on it. Cool anyway :)