Go to navigation Go to content
Toll-Free: 888-886-0939
Phone: 703-665-0307
Foster Web Marketing

Let's Talk About Flex!

Comments (1)

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?!

Related Links:

CSS3 Flexible Box Layout Explained

1 Comments:
And for those of you unaware, "trill" is a new slang word combining "true" and "real". Which while true in statement about flex-boxes being our future, it doesn't entirely make sense. For a complete definition: Trill.
Posted by Shannon on September 26, 2012 at 05:59 PM

Post a Comment

To reply to this message, enter your reply in the box labeled "Message", hit "Post Message."

Name:*

Email:* (will not be published)

Message:*

Notify me of follow-up comments via email.