If you’re into UI design, or have at least dabbled with it in the past, chances are you’ve run into a situation where you have been frustrated with trying to make a number of elements float next to each other (with various widths) spanning across the entirety of a fixed area.

For example: I have a horizontal navigation with the following links:
Home | About Us | Our Services | Gallery | Contact

Not a big deal right? Well, what if I wanted them to stretch evenly across 960px, and I didn’t want to do a ton of math to figure out what the width would be for each of them individually? This sounds like a nightmare already, but what if I faced my fears and I decide to take it a step further by using something silly like padding or a border on them as well? As Smashing Magazine has said: “PERCENTAGE + PADDING + BORDER = TROUBLE.”

Well, At this point in the past, chances are I would have abandoned the idea completely but because of the lovely flexbox I don’t have to! Check out a few of my examples below as well as the more detailed article: CSS3 Flexible Box Layout Explained from Smashing Magazine for more information.

Example 01: Navigation

ScreenshotLive Demo

Example 02: Newspaper

ScreenshotLive demo