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!)
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:
- http://philipwalton.github.io/solved-by-Flexbox/ - Solved by Flexbox showcases problems once had or impossible to solve with CSS alone, now made easy with Flexbox.
- http://jonibologna.com/Flexbox-cheatsheet/ - The ultimate Flexbox cheatsheet
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/
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.