In this article by Ben Frain, the author of Responsive Web Design with HTML5 and CSS3, Second Edition, we will look at Flexbox and its uses. In 2015, we have better means to build responsive websites than ever. There is a new CSS layout module called Flexible Box (or Flexbox as it is more commonly known) that now has enough browser support to make it viable for everyday use.
It can do more than merely provide a fluid layout mechanism. Want to be able to easily center content, change the source order of markup, and generally create amazing layouts with relevant ease? Flexbox is the layout mechanism for you.
(For more resources related to this topic, see here.)
Introducing Flexbox
Here’s a brief overview of Flexbox’s superpowers:
- It can easily vertically center contents
- It can change the visual order of elements
- It can automatically space and align elements within a box, automatically assigning available space between them
- It can make you look 10 years younger (probably not, but in low numbers of empirical tests (me) it has been proven to reduce stress)
The bumpy path to Flexbox
Flexbox has been through a few major iterations before arriving at the relatively stable version we have today. For example, consider the changes from the 2009 version (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/), the 2011 version (http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/), and the 2014 version we are basing our examples on (http://www.w3.org/TR/css-flexbox-1/). The syntax differences are marked.
These differing specifications mean there are three major implementation versions. How many of these you need to concern yourself with depends on the level of browser support you need.
Browser support for Flexbox
Let’s get this out of the way up front: there is no Flexbox support in Internet Explorer 9, 8, or below.
For everything else you’d likely want to support (and virtually all mobile browsers), there is a way to enjoy most (if not all) of Flexbox’s features. You can check the support information at http://caniuse.com/.
Now, let’s look at one of its uses.
Changing source order
Since the dawn of CSS, there has only been one way to switch the visual ordering of HTML elements in a web page. That was achieved by wrapping elements in something set to display: table and then switching the display property on the items within, between display: table-caption (puts it on top), display: table-footer-group (sends it to the bottom), and display: table-header-group (sends it to just below the item set to display: table-caption). However, as robust as this technique is, it was a happy accident, rather than the true intention of these settings.
However, Flexbox has visual source re-ordering built in. Let’s have a look at how it works.
Consider this markup:
<div class="FlexWrapper">
<div class="FlexItems FlexHeader">I am content in the Header.</div>
<div class="FlexItems FlexSideOne">I am content in the SideOne.</div>
<div class="FlexItems FlexContent">I am content in the Content.</div>
<div class="FlexItems FlexSideTwo">I am content in the SideTwo.</div>
<div class="FlexItems FlexFooter">I am content in the Footer.</div>
</div>You can see here that the third item within the wrapper has a HTML class of FlexContent—imagine that this div is going to hold the main content for the page.
OK, let’s keep things simple. We will add some simple colors to more easily differentiate the sections and just get these items one under another in the same order they appear in the markup.
.FlexWrapper {
background-color: indigo;
display: flex;
flex-direction: column;
}
.FlexItems {
display: flex;
align-items: center;
min-height: 6.25rem;
padding: 1rem;
}
.FlexHeader {
background-color: #105B63;
}
.FlexContent {
background-color: #FFFAD5;
}
.FlexSideOne {
background-color: #FFD34E;
}
.FlexSideTwo {
background-color: #DB9E36;
}
.FlexFooter {
background-color: #BD4932;
}That renders in the browser like this:
Now, suppose we want to switch the order of .FlexContent to be the first item, without touching the markup. With Flexbox it’s as simple as adding a single property/value pair:
.FlexContent {
background-color: #FFFAD5;
order: -1;
}The order property lets us revise the order of items within a Flexbox simply and sanely. In this example, a value of -1 means that we want it to be before all the others.
If you want to switch items around quite a bit, I’d recommend being a little more declarative and add an order number for each. This makes things a little easier to understand when you combine them with media queries.
Let’s combine our new source order changing powers with some media queries to produce not just a different layout at different sizes but different ordering.
As it’s generally considered wise to have your main content at the beginning of a document, let’s revise our markup to this:
<div class="FlexWrapper">
<div class="FlexItems FlexContent">I am content in the Content.</div>
<div class="FlexItems FlexSideOne">I am content in the SideOne.</div>
<div class="FlexItems FlexSideTwo">I am content in the SideTwo.</div>
<div class="FlexItems FlexHeader">I am content in the Header.</div>
<div class="FlexItems FlexFooter">I am content in the Footer.</div>
</div>First the page content, then our two sidebar areas, then the header and finally the footer. As I’ll be using Flexbox, we can structure the HTML in the order that makes sense for the document, regardless of how things need to be laid out visually.
For the smallest screens (outside of any media query), I’ll go with this ordering:
.FlexHeader {
background-color: #105B63;
order: 1;
}
.FlexContent {
background-color: #FFFAD5;
order: 2;
}
.FlexSideOne {
background-color: #FFD34E;
order: 3;
}
.FlexSideTwo {
background-color: #DB9E36;
order: 4;
}
.FlexFooter {
background-color: #BD4932;
order: 5;
}Which gives us this in the browser:
And then, at a breakpoint, I’m switching to this:
@media (min-width: 30rem) {
.FlexWrapper {
flex-flow: row wrap;
}
.FlexHeader {
width: 100%;
}
.FlexContent {
flex: 1;
order: 3;
}
.FlexSideOne {
width: 150px;
order: 2;
}
.FlexSideTwo {
width: 150px;
order: 4;
}
.FlexFooter {
width: 100%;
}
}Which gives us this in the browser:
In that example, the shortcut flex-flow: row wrap has been used. That allows the flex items to wrap onto multiple lines. It’s one of the poorer supported properties, so depending upon how far back support is needed, it might be necessary to wrap the content and two side bars in another element.
Summary
There are near endless possibilities when using the Flexbox layout system and due to its inherent “flexiness”, it’s a perfect match for responsive design. If you’ve never built anything with Flexbox before, all the new properties and values can seem a little odd and it’s sometimes disconcertingly easy to achieve layouts that have previously taken far more work. To double-check implementation details against the latest version of the specification, make sure you check out http://www.w3.org/TR/css-flexbox-1/.
I think you’ll love building things with Flexbox.
To check out the other amazing things you can do with Flexbox, have a look at Responsive Web Design with HTML5 and CSS3, Second Edition. The book also features a plethora of other awesome tips and tricks related to responsive web design.
Resources for Article:
Further resources on this subject:
- CodeIgniter Email and HTML Table [article]
- ASP.Net Site Performance: Improving JavaScript Loading [article]
- Adding Interactive Course Material in Moodle 1.9: Part 1 [article]
