Flex Box

I recently wanted to put together a quick prototype for a web-based UI and instantly had flashbacks reminding me how awkward it was to just arrange two or more components horizontally in HTML. Whoever came up with “float: left”? It’s the most counter-intuitive way to arrange things and it’s never felt natural, to me at least.

Why can’t HTML take a page from Swing? Even the fragmented Android landscape has a somewhat sensible answer to layouts.

I then came across the CSS Flexible Box Layout Module. It appears that over the last 3 years many versions of the spec have been discussed and partially implemented by various browsers, and that the spec has undergone some significant changes. As such there are many conflicting blog posts and articles that refer to keywords that no longer exist and code that does not work.

As of September 2012 the spec is now a Candidate Recommendation and appears to be currently only fully supported in Chrome. But I suspect other browsers will not be far behind.

I gave the flex box layout a try and it worked very well and was significantly more intuitive than float.

The prototype uses Struts 2 and Ajax’es the HTML components into the page based on interactions with a Quant Library. Given that I have little control over what is returned, layout becomes quite important.

At the top-most level the page has two columns: left side for trade economics, and right side for cash flow and lifecycle related schedules. It also uses various other inner columns for laying out the dynamically generated form fields.

Creating two columns where one is 1/17 of the other is as simple as:

#inner_box {display: -webkit-flex;}

#column_1 {-webkit-flex : 1;}

#column_2 {-webkit-flex : 17;}

With Flex Box on the horizon HTML layouts make sense again. There is hope for me after all.

One response to “Flex Box

  1. Flex-box layout is great. Super useful when creating html5 mobile websites as well. As long as your target mobile browser is Webkit powered, which most of the newer smartphones are. We use flexbox a lot when developing the Etsy mobile website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s