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.
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!