Welcome to week 4 of Flexbox Fridays!

If you have ever built a responsive, split navigation with floats and general hackery you know all too well how uneccessarily complicated it feels. How many actual lists?! In which order? But how will I transition from mobile to desktop gracefully? So many questions!

Luckily, flexbox is perfectly suited for buidling such navigations. Not only is the general layout of the navigation lists much cleaner, the order property allows us to declare the ordering of elements.

There is an initial assumption of "0" with flexbox ordering from the the first element on. We can choose to either define an order value for each flexed item and then change this with media queries, or "trump" these defaults with a negative value.

For our demo this week we took a look at building a responsive "split navigation" that's not actually split at all, but rather the order of the elements is altered. We also added a bit of pretend content (the best kind) to demonstrate how these can be stacked in a row on mobile and then be reordered to produce the main content in the center with two asides.

It's important to quickly note here that order should be used for visual purposes only. The property has no effect on actual DOM organization and designing its use to be pivitol in the overall functioning of a site would make for poor accessibility.

During our research we stumbled upon this especially well thought out demo by Terry Mun and this flexible bar navigation pen that you may want to check out as well.

As always, feel free to comment with any questions or corrections and be sure to share any flexbox experiments you are working on yourself!

Happy (flexible) Friday!


2,779 0 12