Flexbox adds a level of control to our layouts that we didn't really have before, we hacked our floats and clearfixed, we fought whitespace with inline-block, pushed display:table, and even stretched content with position:absolute. We no longer need to rely on these solutions beyond providing something visual to browsers without flex features. Flex's features will add an important set of tools to how we build, not by replacing what was there before, but improving upon how we build today.

The major challenge that I see with Flexbox is that there's a distinct gap between what we build today and how we'll approach tomorrow. The prevailing attitude seems to be “Not for another x years”, or “we'll wait for X browser to catch up”, but we don't need to think like this anymore.

I don't blame people for finding Flexbox difficult to grasp. Most of the tutorials that exist on the web either show you a bunch of boxes that are completely abstract, or jump so far ahead that the only logical thing to do with Flexbox is to work backward from these magically simple layouts, and end up in a mountain of unmaintainable code. My own previous article was the former, I wrote it to understand Flexbox.

These tutorials exist for a purpose, either they're trying to show you what the properties are and what they do, or they're trying to excite you about future possibilities. Both of which I believe they succeed at doing, but there's still a gap - we need a logical, pragmatic approach to start using Flexbox today.

TLDR; version

I recognize this experiment write up is super long, so here's a shortcut if you don't have much time:

Road to Flexbox

In this experiment, I'm attempting to show the value of Flexbox in today's layouts, outline a strategy for adding it and give a few examples of how Flexbox can give current layouts extra powers that we either couldn't achieve, or were difficult to achieve before. I'll also be documenting some of the common mistakes that I've made while trying to implement it as I believe being able to troubleshoot any new technology's problems is sometimes one of the harder things in picking up something new. My aim is that more people start using Flexbox so that we can push its limits, and get any bugs ironed out, sooner rather than later.

If you're not already familiar with Flexbox, this is a follow up of my previous experiment Flexbox adventures, where I tried to tackle and understand how it actually calculates space and how it might be used in the future. It's full of helpful links that'll bring you up to speed on Flexbox.

Making layouts better

Flexbox's properties involve a whole array of control over alignment and ordering, and once you get used to how it works, it starts to become clear how little CSS you actually have to write to augment how we're building things today.

Do I believe we'll completely drop floats, inline block, or display table? No, and I think educators should still teach students these things even if they do get eventually phased out, it's important to know that sometimes with CSS, we bend, and that's where interesting discoveries are made.

Here are some examples of layouts that I believe we can improve quite easily by adding Flexbox.

Card Layouts

Card Pattern: Dropbox documentation

The card layout is pretty popular, but in order to get equal height columns you have to set minimum heights, or split lists up into rows. If you don't split them into rows, you have to clear after every row. Flexbox gives us the ability to solve these problems with ease.

Split screen layouts

Split Layout pattern: Atlassian

Split Layout pattern: Khan academy

One of the difficulties with split screen is it's reliance on minimum height or position:absolute stretching, making it a pain when moving across screen sizes. Flexbox can just give each item equal height, and then provide you with options for vertical centering with ease.

Pinned Layouts

Dan Mall uses a pinned layout on the Crayola case study, as recreated in Flexbox by Zoe Gillenwater in this post.

Using the space-between property this layout can be achieved with Flexbox, and give options for ordering and alignment.

Newspaper and ad units

Newspaper and ad units, the latest Guardian site uses some Flexbox

The benefit to newspaper layouts and ad units is the ability to order and align. This is just a conceptual idea, and maybe it's stupid in practice - but imagine a system that detects that you don't ever read the sport section - well it can reorder sport toward the bottom of the page and maybe push world news toward the top. Being able to reorder sections could add simple reader preference reorganization. This is made incredibly simple with Flexbox.

Multi-column layouts

Google now Multi column layout

If like me, you thought CSS columns would give you this, and then gave you nothing but broken content blocks - this is one way we can split up a list over multiple columns without having to split up the list in markup.

Dashboards

The Fitbit Dashboard

Dashboards offer us another case for ordering, but also could benefit from column wrapping, or equal height columns.

Embracing change

Flexbox aims to solve layout problems that we've hacked to achieve, it allows us to embrace the variable nature of both content and design. It also allows us to accomodate design requests which seem simple to someone who doesn't build, but results in either way too much time, us writing completely unsemantic markup, or way too much code to seem worthwhile. In the future, we'll have more tools like CSS Grid, but for now Flexbox is ready and waiting to be used right now, and we no longer have to bash every layout with the rusty old hammer we've been using for 13+ years.

Content is flexible

Content is inherently flexible, in the past we’ve designed, built and approached fitting the content to the design rather than fitting the design and build to the content. Even today, we impose restrictions based on build constraints, when we should be relying on the content strategists to impose these restrictions, not the developers.

We don't always have control

Content management systems are a prime example of where we cede control on layout flexibility - we are often designing with limited knowledge of what content will be within a space. We can achieve things by all kinds of hackery, or we can impose certain rules - but we lose that flexibility when we do. Some of our approaches to achieving things visually cause us to abandon markup that makes sense and when we stop building in way that makes sense we have to work really hard to make them accessible.

More design tools

Design often informs what we build and how we build, but so do the tools and constraints of development inform the capabilities of what can be designed. Ideally, a more mature understanding of Flexbox will have us creating better quality, and more varied designs.

Bend and break

It's not until we fully understand something that we can start to bend it beyond its original purpose to achieve something greater, how we break it influences how we make it.

Today, we know the basic rules of Flexbox and what that can do to today's layouts, with education we can influence entirely new layouts, and it won't be until we see Flexbox used in combination with some of the other lesser used, or newer features that we will really start to see the possibilities appear.

Strategy for Flexbox

To make Flexbox easier to adopt, I decided to look at some of the key criteria in which would make it easy to do so.

Build the way we always did

We should be able to look at just about any project that we’ve done in the past year and add a piece of code and reap the benefits of Flexbox. We should be able to build a new project tomorrow the way we always did, then add some code that will make Flexbox work and make layouts better.

Using a library like Modernizr we can put the new flexbox code behind .flexbox, and optionally put any layout specific to floats (float:left, width:33% etc) behind .no-flexbox so that we can one day phase it out.

Minimize code

Managing 3 syntaxes plus float layouts just to enable Flexbox is madness. Using an autoprefixer is an integral part of the Flexbox adoption strategy.

Make it worthwhile

We need our layouts to benefit from Flexbox otherwise we're throwing unnecessary code at a layout for the sake of it. The obvious ones of these involve vertical centering, columns matching their ends, and ordering.

Cut the mustard: Flex-wrap

Flex-wrap is the point at which Flexbox often becomes useful, it's not necessary for all of these enhancements, but it's the point at which I choose to enhance Flexbox from to prevent layout issues. Fortunately, the Modernizr library's ‘.flexbox’ has flex-wrap as part of its detection, so if you use .flexbox you'll be cutting out browsers which don't support flex-wrap.

I've seen talk of people using @supports here, but that cuts out way too many browsers, either write your own feature detection or just use Modernizr.

Enhancing with Flexbox

To better explain how easy it is to modify existing layouts to flexbox here are two experimental layout enhancements - one with the Card Pattern and one with the Split screen pattern.