Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

A funny thing happened on the way to building a modern CSS Framework — one where IE8 and IE9 were no longer pulling on our coattails. Suddenly positioning, float left and right, and display table and inline-block weren’t our only layout options. We realized we had entered a world where we could solve some of our usual challenges in a more modern way. Enter flexbox, with it’s combination of simplicity, complexity, joy, and frustration.

Drawing from real-world examples, we’ll examine some of the more common layout challenges that flexbox simplifies, as well as some real-world gotchas we’ve experienced.

In 1999, tables were the common thing to use, and then along came CSS and absolute positioning, Dreamweaver’s layers, floats and display:inline-block.

By that stage we had decent vertical alignment, which let us build menus and some grids although we had to deal with whitespace – but inline-block wasn’t meant for layout, and by IE8 we’d moved on to display:table .  

We have arrived at the flexible box model, which is responsive and gives us control and gives us perfect vertical alignment as well as a lot of control over our elements.  

There are two parts to Flexbox: the Flexbox Container and Flexbox Items.

Flexbox Container properties:

  • display (set to either flex or inline-flex)
  • flex-direction (row or column)
  • flex-wrap (single row or wrap)
  • flex-flow (shorthand for flex-direction and flex-wrap)
  • justify-content (main axis alignment)
  • align-items (cross axis alignment)
  • align-content (space in multiple rows)

The last three of those properties relate specifically to the Main axis or the Cross axis of the Flexbox.

If flex-direction is set to row, then the Main axis will be horizontal, starting on the left and ending on the right, while the Cross axis will be vertical, starting at the top and ending at the bottom.

If flex-direction is set to column, then the Main axis will be vertical, starting at the top and ending at the bottom, while the Cross axis will be perpendicular to the Main axis, starting on the left and ending on the right.

Note that these can be reversed when working with right-to-left languages.

Flexbox Item properties:

  • flex-grow (how much items grow, relative to other items, to fill the available space)
  • flex-shrink (how much items shrink, relative to each other)
  • flex-basis (the default width for flex items, expressed in percentage, pixels, rems, ems)
  • flex (shorthand for flex-grow, flex-shrink and flex-basis, in that order)
  • order (set the order in which items are displayed)
  • align-self (override the parent’s align-items property for a single child item)

Setting appropriate values to these properties, Flexbox can be used to:

  • give items equal height
  • give items equal width  
  • lay items out evenly spaced
  • align items to top or bottom
  • grow item boxes according to content while retaining equal height, width and/or spacing
  • align one item box differently to its neighbours
  • achieve one of the holy grails of CSS: vertical centring
  • align text alongside media objects
  • create evenly spaced horizontal lists
  • centre items absolutely
  • create and control grids (handy until CSS Grid Layout is widely supported)
  • size items responsively

There are more resources for further exploration on the final slide.