Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

CSS: Design with Flexbox

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

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 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: 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 ( It’s worth knowing that a future indication of possible changes would be in the latest Editor’s Draft (

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:

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:

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:

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;.