Tuesday, March 11, 2014

Flexbox Bar Navigation Demo

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

But I've been enjoying tinkering with flexbox, so I decided to toss it together with that and it made for a pretty educational example I think.

Here it is:

Flexbox makes it easy to align the items however you want:

Flexbox Bar Navigation

Flexbox makes it easy to allow the menu items to take up as much space as they need, without specifying any exact numbers:

Flexbox Bar Navigation

But if you want to apply exact numbers, you can:

Flexbox Bar Navigation

Flex items can wrap and the properties can change with media queries:

Flexbox Bar Navigation

Flex items are easy to align how you want, even vertically, even with centering:

Flexbox Bar Navigation

In the demo, feel free to turn on the outlines to see how the boxes align themselves.

I realize not everyone can use flexbox on everything they work on. Yadda yadda browser support, clients, etc. Some people can, on some projects. After playing with it for stuff like this, I think it becomes clear how important it is going to become.