Rewarding your website visitors with the most dynamic experience just got easier, with Flexbox.

As you already know, CSS is an amazingly powerful language that is ever changing, firstly with the adoption of many of the features in CSS3 and secondly with CSS4 in sight. And don’t even get me started on my love for SASS. However, there are still a few areas that need a little polishing. But not to worry there is light at the end of the tunnel. With flex being introduced as a standard as browser support – hooray!!!

So, over the past while I have been dipping in and out of some of the cool flexbox features, and lets just say some of the things that I have discovered are pretty impressive. Some of the ways that flexbox makes life easier include footers, vertical alignment, spacing etc and that’s just the benefits that I have noticed for desktop.

Flexbox has been designed to aid a responsive CSS box model with out having to write a million lines of code to change the direction or ordering of elements on the page, because flexbox does all of the dirty work for you.

A Flex history lesson…

If you are new to flexbox I may have lead you a stray already. Flexbox isn’t as new as you may think, it's been around for a while, in fact Flexbox has been around since 2009. Since flexbox first landed there have been 3 versions introduced, all heavily reliant on the use of polyfills of course.

Unfortunately this has created a little bit of a flexbox minefield so if you are doing some light flexbox reading before bed, make sure you are reading something that was written fairly recently. One way that you can tell what version you are working with is by how your parent container uses flexbox:

  • 2009 uses display: box-*;
  • 2011 uses display: flexbox;
  • 2012 uses display: flex;

The most up to date version looks like it’s going to be here to stay.

Be sure to check it out here.

Are we ready to use Flexbox?

Introducing something new is always a little scary especially for commercial work because there is always the question of whether it is going to be able to do everything we need it to. The answer is YES, we are ready for Flexbox. To put things in perspective, it is more widely supported than the <video> tag in HTML5. 93% of web users are using browsers that can handle Flexbox. With that stat in mind I thinks its time everybody looks at Flexbox if they haven’t already done so.

Getting Started with Flexbox

To begin with introducing flexbox into your pre existing framework, whatever it may be, you first need to introduce flexbox  to your parent element. This is probably the most important basic flexbox rule as this will decide how the rest of your layout will behave. You introduce this by adding the display: flex; rule to your parent container.

Flexbox axis

Before you dive into the cool CSS rules available with flex, it’s important that you understand how the flexbox axis works and the influence that this can have on your entire layout.

There are two main axis with flexbox, main axis and cross axis. The main axis is the axis that your flex items will sit across. Bare in mind that while the default behaviour of this axis means that it flows horizontally this isn't always the case, this can be easily changed using flex: direction;

The second axis is the dross axis and this will always remain perpendicular to your main axis. The direction of your cross axis will depend on the direction of your main axis.

Download my introduction to Felxbox here (PDF Download 182KB).