This site is dedicated to all things I see and that I think are interesting to publish almost always are other very smart people.

Flexbox Bar Navigation Demo

100+ CSS-Tricks by Chris Coyier  

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) onCodePen.

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

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s