Flexbox Bar Navigation Demo

CSS-Tricks

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:

See the Pen Bar Navigation with Flexbox and SVG icons by Chris Coyier (@chriscoyier) on CodePen.

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

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

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

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

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

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.

---

Flexbox Bar Navigation Demo is a post from CSS-Tricks

more info...