CSS3 Flexible Content Boxes?!

Posted By on Jul 22, 2013 | 0 comments

Back in 2011, Smashing Magazine released an article about a future spec that would, could and should make any web developer sigh with relief: Flexible Box layouts.

Have a look at that article, and, assuming you care about such things, you too can get a sense of why this would be so cool: long have front-end interface developers rodeo’d with divs, margins, positioning, floats, and all kinds of other elements and techniques to get their content to show up in a manner that wasn’t tables but mimicked what tables could do.

Inline-Block elements have helped immensely. So has display: table / table-cell CSS. And of course, just grabbing a pre-built grid system like Zurb’s Foundation and letting someone else figure out the complex math is always a great way to go.

However, what about the Flexible Box?

Well, I stopped by the W3 spec for flexible boxes recently. There’s been some updates, but this is still under development. If you didn’t bother having a look at that Smashing Magazine article, here’s a quick summary:

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need. The contents of a flex container:

  • can be laid out in any
  • flow direction (leftwards, rightwards, downwards, or even upwards!)
  • can have their display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order
  • can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axi
  • can “flex” their sizes to respond to the available spac
  • can be aligned with respect to their container or each othe
  • can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

Pretty cool concept.

Unfortunately, it’s not widely adopted as of yet; for those of us who love us some FireFox or Chrome, you’ve got support. But, as usual, IE is far behind, as is Safari.

Have a read on Mozilla’s blog for further info. I wouldn’t start developing mainstream using Flexible CSS just yet, but it may be interesting to throw something together on your local playground somewhere.

Submit a Comment

Your email address will not be published. Required fields are marked *