Create Better CSS Layouts with Flexbox

For many years, it seemed like columns were one of the toughest layout challenges web designers faced. It often took various hacks, such as clearfixes, to get them aligned and looking good.

Thankfully, the advent of CSS Flexbox has helped to make this previously-difficult process a much simpler one. Because Flexbox was created with multi-container (columns or rows) layouts in mind, we’ve said goodbye to all of those old hacks.

The result is that we can create some absolutely amazing layouts in a fraction of the time (if they were possible with floating elements at all). Below, we’ve compiled some prime examples of CSS Flexbox in action. Let’s take a look at what it can do!

Responsive Rules

One of the most convenient features of Flexbox is its ability to adapt based on the allotted space for each container. That in itself is responsive. But add in some helpful media queries and you can really tweak things so that they look perfect on every screen. Check out this example layout at various viewport sizes to see how things adjust.

Full-Screen Navigation

Navigation is a design element that can really benefit from Flexbox. Not only when it comes to responsive sizing, but also features like ensuring equal column heights and text alignments. You’ll find each of those elements with this overlay navigation snippet.

The Timeline

A timeline is just the kind of complex layout that Flexbox was made for. On large screens, this example neatly alternates entries on different sides of the line. But as the viewport shrinks, everything collapses into a single column, while still maintaining design elements that reflect the purpose of the layout. It accurately depicts a timeline either way.

Much like your standard navigation bar, pagination menus also can greatly benefit the adaptive properties of Flexbox. In this example, wider viewports see a full listing of page numbers. But simply rearranging a large number of containers for mobile devices doesn’t make sense here. Instead, CSS is used to hide all but the current page from the menu. This saves space and still provides the user with the functionality they need.

Featured Products

Combining Flexbox with CSS selectors gives us the ability to do some interesting things with a list of products, posts or other content. In this snippet, we see a neat layout of six products. Through the use of selectors, the first two are much more prominent on larger viewports. On smaller screens, however, that effect is jettisoned in favor of displaying everything at an equal size.

Making Masonry

Masonry layouts are a great option for blogs, portfolios or even photo galleries. They look complicated, yet the style enables each item to stand out individually. Here’s a demonstration of how Flexbox can make a masonry layout even better. It takes this seemingly-random set of containers and beautifully adjusts them based on screen size, whittling down to just a single column at its smallest.

Vertically-Centered Content

Vertically centering text within an element is easy enough, provided you know the height of its parent container. But what about, say, a hero area that has a variable height on different screen sizes? Flexbox makes this a piece of cake, thanks to the align-content property. Here’s an example of how Flexbox does all the hard work for you.

Flexible Form

Forms that don’t adapt to small screens are one of those features that can really drive mobile users crazy. They’re just hard to use. That’s what makes this simple search form example so exciting. The elements are aligned via Flexbox and easily adjust to your screen – even stacking when necessary. This keeps things easy to use on all devices.

Flex Your Layout Muscles

There’s no denying that CSS Flexbox has a bit of a learning curve. But taking some time to learn the basics is highly recommended. Once you start to use it regularly, it becomes apparent just what an improvement it is over using the old float-and-hack methods of the past.

So many of the creative solutions we used to dream up for sizing, spacing and alignment are no longer necessary – because they’re already built in! All it takes is a little know-how and you’ll be building incredible layouts in no time.