News

CSS: Design with Flexbox

Discover how to use Flexbox to separate the source order and design of a site

css logo

When developing a website, we’ve all encountered occasions when the design can only realistically be achieved, code-wise, by opting for an unfavourable source order. Typically, we want the source code to favour the main content before tangentially related content like sidebars.

However, practically, it isn’t always possible and we find ourselves selling our souls to the PSD we work from, to attain what the visual design requires.

Thankfully, as this is such a common problem, there’s a CSS module being worked on that should alleviate our troubles moving forward. The CSS Flexible Box Layout aims to make a number of CSS-based layouts far simpler. It isn’t the first time that FlexBox has made an appearance. You may have heard or read about it before, but it’s had a significant overhaul of late, and as such, it’s time to get reacquainted.

Understand browser support


Head over to caniuse.com and type ‘FlexBox’ in the search field to see the current level of browser support. At present, Google’s Chrome is the only browser even partially supporting the new version of the specification (we’re using v19 here). Other browsers showing partial support are typically using the deprecated version. To continue along, get v19 onwards of Chrome, or the latest development or experimental version.

Get Chrome Canary


The latest iteration of FlexBox isn’t supported in most browsers (yet). When test driving new CSS features, it sometimes helps to have Google’s Chrome Canary. It’s an experimental release of the Chrome browser that has the latest features baked in for us to play with. You can get it here: tools.google.com/dlpage/chromesxs and it will play happily alongside an existing version of Chrome.

Check the spec


Because the latest FlexBox specification is being actively worked on, it’s worth checking what’s changed. Here, we are using the version dated 22 March 2012 (www.w3.org/TR/css3-FlexBox). It’s worth knowing that a future indication of possible changes would be in the latest Editor’s Draft (dev.w3.org/csswg/css3-flexbox).

Existing layout modes

The existing CSS2.1 specification provides four layout modes: block, inline, table and position. We’ve used these over the years in addition to wrestle layouts to our will. Despite our best efforts, however, there are times when the existing layout modes just don’t suffice.

001 .block {
 002                 display: block;
 003 }
 004 .inline {
 005                 display: inline;
 006 }
 007 .table {
 008                 .display: table;
 009 }
 010 ..position {
 011                 position: relative;
 012 }

Enter the FlexBox

FlexBox (and Inline-flexbox) is effectively intended to be a fifth layout mode. The contents of a FlexBox can be laid out from left, right, top or bottom and the display order can be entirely independent from the source order. Furthermore, FlexBoxes, as their names imply, can flex to the available space.

001 . FlexBox {
 002                 display: FlexBox;
 003 }
 004 ..inline-FlexBox {
 005                 display: inline-FlexBox;
 006 }

Our first FlexBox


Let’s start with an example, similar to the one in the W3C spec: a list of navigation items that will span across the viewport. The markup is a standard unordered list and five list items. We’ve just used an icon font to make things more visual. You can view the example online at: dabblet.com/gist/2793459.

Make it span


The flex-wrap property makes it simple to ensure items span multiple lines. Let’s suppose we want to make two columns from these list items. To do that using FlexBox we can set the list items to 50% width and add flex-wrap: wrap; to the unordered list. Here’s that example online: dabblet.com/gist/2793549.

Widths are respected


It’s still possible to alter the width on flex-items within a FlexBox. Here we’ve set the third item so that it has a width of 100%, so the first and last two list items take up 50% and the third takes 100%, placing it in the middle of everything. Note that float and clear have no effect when using a FlexBox.

Understanding flex-direction


FlexBox makes it simple to alter the direction of elements with the flex-direction property. This can accept the following values: row, row-reverse, column and column-reverse.

With our same markup structure it’s therefore simple to make our list vertical by using flex-direction: column;. The reverse options stack items in the opposite order. Have a play: dabblet.com/gist/2793598.

Flex-flow property


We’ve looked at flex-direction and flex-wrap – but these two properties can be combined using flex-flow. So as an example, let’s say we wanted our list items to span multiple wrapping rows, backwards. We can just use flex-flow: row wrap-reverse. You don’t have to declare both the flex-direction and flex-wrap, either will work alone, eg flex-flow: column;.

×