Flexbox, or ‘flexible box layout’ has been around for sometime, but it’s been treated with caution due to its lack of support from browsers in the past.

It came about and seemed to answer a lot of our CSS headaches, but actually using it felt like just a pipe dream. Now, Flexbox is a go-to model for a lot of everyday layout answers.

What Actually Is Flexbox?

Flexbox, as you may have guessed from the name, allows flexibility.

The main idea behind the flex model is to give the container the ability to adjust its item’s width, height and order, to best fill the available space. A flex container expands to fill the available free space, or shrinks them to prevent them from overflowing. Basically, it makes building layouts so much easier. And it is so simple to use.

How Long Has Flexbox Been a Viable Option?

Flexbox was originally released in the 2009 spec, and it came with the box-type declaration. (Note: If you see any tutorials and examples with the box-* property, it’s the initial outdated version, stay clear!)

In 2011 the spec changed, which saw a flex container defined using display: Flexbox or display: inline-Flexbox;

In 2012 the spec was again updated to the currently used display: flex (you’ve got to love shorthand versions!)

See Also: Reaching Your Vertical Limit with Centre Aligning

Can I Use Flexbox?  

There is no question - everyone can use it in some way. If you have a look over at Can I Use - you will see what browsers support the Flexbox model. (When using Flexbox, just make sure you include the right prefix for the job.  To get an idea, the guys over at Should I Prefix have you covered.)

Recently, Safari published an article regarding upcoming updates in the next release, one of which is the dropping of CSS prefixes for over 45 CSS properties, including Flexbox.

"The most significant to go prefix-free are the flex properties, the transition properties, the transform properties, and the animation properties." (Source)

For anyone working with SASS, there is a mixin available over on GitHub that allows users to test Flexbox using the native support of the current browsers: https://github.com/mastastealth/sass-flex-mixin

Flexbox in the Wild

Everyone loves a playground to test the latest code and there are a few great ones accommodating Flexbox:

Quick Introduction to the Flexbox Properties

display: flex | inline-flex
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-items: flex-start | flex-end | center | baseline | stretch
align-self: auto | flex-start | flex-end | center | baseline | stretch
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex-basis: content | <'width'>
flex-direction: row | row-reverse | column | column-reverse
flex-flow: <'flex-direction'> || <'flex-wrap'>
flex-grow: <number>
flex-shrink: <number>
flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
order: <integer>

The Holy Grail

Simply put, the Holy Grail Layout is a page with a header, footer, and three columns. The centre column contains the main content, and the left and right column contains navigations or adverts.

Most CSS problems aim to meet these goals:

  • They should have a fluid center with fixed-width sidebars.
  • The center column (main content) should appear first in the HTML source.
  • All columns should be the same height, regardless of which column is actually the tallest.
  • They should require minimal markup.
  • The footer should “stick” to the bottom of the page when content is sparse.

Due to the limitations of CSS, none of the classic solutions were ever able to cover all of them. Flexbox allows for a complete solution: http://philipwalton.github.io/solved-by-Flexbox/demos/holy-grail/

See Also: Responsive Web Design Frameworks You Should Consider


This is a repository created by Philip Watson and is quite simply a community-curated list of Flexbox issues and cross browser workarounds for them: https://github.com/philipwalton/flexbugs

Foundation - Extending the Power of the Grid

For anyone using the Zurb Foundation framework, their next release (version 6), will utilise Flexbox in a more in-depth way.

"From the get go, Flexbox allows us to harnesses easy source ordering so you can choose what comes first regardless of the markup. Align content anywhere: top, left, right, bottom, center, middle. Anywhere we please! Create block grids with no additional mark-up or clears. Nifty." (Source)


If you’re in two minds about using Flexbox - just do it. The vast amount of resources, playgrounds, online communities and full showcases on Flexbox in the wild should be enough to sway you to take the plunge.

Although it’s perceived as a relatively new method of laying out page structures - it has 6 years under it’s belt, and it has had a lot of attention paid to it in the recent years. 2014 seen Flexbox grow more in the public eye, making 2015 the year to adapt to the flexible ways, using the holy grail to cut out the standard CSS headaches we are so used to. Embrace the flexibility.

Ignite your brand, utilise user-generated content no matter where you or your audience are ›