In our last article, I wrote about the first of several standards changes which are already affecting websites built today and which will continue to influence the web moving forward. That standard is the Regions standard. In this post, we’ll look at yet another layout-related innovation coming our way, Flexbox.

What is Flexbox and what can it do?

Like the Regions standard, Flexbox is intended to solve a long thorny layout issue for website designers. Specifically, the standard is intended to provide an efficient manner of laying out blocks of content, within a container ‘envelope.’ And, in keeping with the modern web, Flexbox allows the layout system to adapt to content which might change in size dynamically, and more easily accommodates different resolutions and devices.

For a real world example of where Flexbox might come in handy, imagine an Ecommerce product page, with several products, arrayed on a page. Each product ‘item’ might contain a thumbnail image, with copy beneath, denoting features, price, etc. This layout, by Chris Coyier, might serve as an example. Imagine here that each numbered box was our product item. Note how the boxes are aligned, across the browser width, with equal spacing.

It might seem hard to believe but, prior to Flexbox, such layouts were not easy to achieve. In fact, Flexbox represents the third evolutionary approach to solving these challenges. Originally, when a layout required arraying elements across a page in rows or columns, the design world’s first response was to hack the html <table> tag. All manner of content, including images, headlines and paragraph text, would get stuffed into table cells. An older example of this approach can be seen in this site of ours, from 2010. While this hack allowed designers to achieve their desired results, it represented a subversion of the original intent of the <table> tag, which, very clearly, was only intended to display data, in tabular form. When designers co-opt the use of an html element for a purpose other than its original intent, the act is considered apostasy. HTML tags are intended to have specific purposes and govern page structure only. Using them in an unintended way defies the central catechism of the web today: Semanticism. The idea behind Semanticism is, in short, the idea that elements used to build a web page should have universally understood roles. (Shovels are used to dig trenches, hammers are used to pound nails. While you probably could use a hammer to dig a trench, you absolutely should avoid this practice…) One goal of the semantic web is that, simply by looking at the elements used to build a page, much can be learned about its structure and content.

So, then, obviously tables were a no-no in the quest for layout solutions. As the web continued to evolve, CSS became the dedicated language used to express presentational elements on web pages. Increasing use of CSS brought us the ‘float’ property. Floats are used to, well, float content blocks to the left or right of other information. Text floating to the right and wrapping below an image, for instance, is a typical situation where a float gets applied.

But floats, too, are not without their issues and only incompletely address the issues Flexbox ultimately resolves. Floats actually take the element being floated out of what is referred to as the ‘document flow.’ This is the natural flow within a web page which, by default, wants to vertically layer (block level) elements below one another on the page. Removing floated content from the document flow, by itself, creates problems for designer/developers which also necessitates hacky code writing.

So, then, we’re back to Flexbox. Finally, with this CSS innovation, the web has a tool which is intended to create flexible content areas which don’t require hacky sidesteps to make them work. They’re semantic and, by nature, adapt to different resolution and devices, which make them perfectly adaptive for the responsive web of 2015. Additionally, as of this writing, Flexbox already enjoys wide support among different browsing environments. Finally, the standard has built-in property values which thoughtfully build in spacing and flow systems, making it much easier for designers to lay elements out on the page.

Flexbox. It’s here, and it’s going to make all our lives easier, very soon.