I think many web-developers would agree that the most exciting session from this year’s Google I/O conference, was “The Web Can Do That!?”, given by senior Chrome Team developer, Eric Bidleman.
Bidleman covers many forthcoming developments in modern browser capability that sent butterflies in my belly, but the one thing that meant the most to me was a little CSS candidate called Flex-Box
The Problem
I can remember long ago, when I was still just starting to get down on web design, there was the persistent agony of positioning things; and in particular centering things and spacing like-elements evenly. It leads to some very messy cases, the most frequent of which went something like:
.element{ position:absolute; left:50%; width:80px; margin-left: -40px; /*half the width of the element*/ }
‘Awkwardly large amount of code, but it worked...unless you wanted to keep the width dynamic…
It gets very complicated, and frustrating, and probably led to the disappearance of countless packages of double stuffed Oreos, in many “eat your feelings” related episodes.
The Solution
It’s the vestiges of these early torments that makes me so pumped about flex-boxes, because positioning is super easy. Ill let Bidleman take it from here. Enjoy!!!
Drawbacks?
Right now, browser support is weak and essentially all contingent on browser prefixes. Sadly, flex-box will still require browser prefixes for the foreseeable future. Step in the right direction though!
Fun Fact:
Did you know 9 out of 10 Paul Irishes Agree that Flex-Boxes are trill and will drastically reduce the level of misery associated of positioning elements?!