Articles & Publications

Discover the best tools and products to aid in your development workflow.

Flexbox – True Layout Properties for CSS without a Framework

Visit Flexbox – True Layout Properties for CSS without a Framework

Observations for creating Flexbox layouts in CSS

We have tried everything to tame the elusive HTML layouts. We began with tables, then divs using CSS floats and even changing the display property but nothing was easy without a number of hacks and feats of magic.

Now entering, Flexbox! The flexbox module is a collection of wonderful new CSS properties that I’ve been excited about since I came across it on www.css-tricks.comand even more so, when I attended a workshop at the WebVisionEvents conference in May. It is the true layout module in CSS without a framework.

Floats were never really meant to be used the way that we use them for layout. It’s original intent was to align images in content. ?But, some rather clever individuals played with the property and here we are today; using floats for layout. It is an okay solution, but very quirky.

This is why the use of flexbox is so…..great! ?All of the things we tried to force floats, HMTL hacks and other tricks with javascript to do, can now be achieved with flexbox. It is now?easy to re-order items in rows and columns, center elements vertically and horizontally, create sticky footers, etc. There are a number of great articles written about the module on the web and I encourage you to begin reading up on it’s use.

We can use the properties of flexbox now, especially for mobile since those have the most up-to-date browsers, but desktop won’t be fully supported by IE until version 11. ?The current browser support is as follows:

  • Chrome any
  • Firefox any
  • Safari any
  • Opera 12.1+
  • IE 10+
  • iOS any
  • Android any

By this time next year, I may be saying bye bye to any CSS framework I am using for layout.

I found a couple of resources that will allow you to play around with flexbox and also a site created by Phillip Walton that made a Boostrap-esque presentation site on how to use flexbox:? ?It’s great! ?And of course, CSS-Tricks has a complete guide to flexbox that I have found very useful:?

If you want to play around with the properties here are a few codepens that have used flexbox for responsive layouts: