blog @ pebbl

I know it might not sound like something to rally much interest, but when you spend much of your working life submerged in particular technologies - using them to find the best solution to a multitude of problems - it's always nice to hear about a new way to achieve something. Especially when that "certain something" has seemed almost too obvious for words, and really should have been implemented years ago...

I stumbled across this rather useful new strand of the W3C CSS proposals completely by chance - I can't quite recall what it was that I was looking for at the time - but it definitely wasn't anything to do with an entirely new box model. And especially not the kind of box model that could put an end to a great many HTML layout problems; problems that happily fuel the frustrations of web developers everywhere.

Now I've discovered new properties and attributes before, or even completely new methodologies - only to read further in to the documentation and find that the proposal has either been thrown out or isn't even a gleam in any self-respecting browser developer's eye. But what was even more surprising about this particular CSS addition, was that it had already been partially implemented in some of the "contemporary" browsers.

Well I think that's probably enough of an introduction... Was I a little over-the-top? :) Anyway the name of this particular little find is what is currently known as the "Flexible Box Layout" or FlexBox for short - however I do get the feeling this may change before it actually becomes more mainstream.

http://www.w3.org/TR/css3-flexbox/

Flexible Box Model?

Now if you aren't up on web-developer terms, you may have no idea what a Box Model is... If that's so then I'm pretty certain you wont loose any sleep if I don't go in to detail here. Sufficed to say, it is the "building block" logic that controls the way HTML Elements are rendered - in terms of their dimensions and positioning. Whilst that might sound extremely uninteresting, you may at least realise that a change to anything described as a "building block" can have fundamental affects.

In my experience there are two rather major layout desires that crop up time and again when web-developing. And the fact that there is no elegant way of implement a solution for either (with current HTML or CSS) it normally leaves only two options. Using a css/js hack... or the complete avoidance of the problem by design.

Find your center

FlexBox totally solves the vertical center problem. You can have any number of child elements positioned to the exact centers of their parents - along the horizontal and the vertical - without the need to know the parent's specific dimensions. Just like the good old days and the "evil" table cell. :)

To Infinity and ...

I have yet to test this, but as far as I can tell FlexBox should do away with the problem of "premature new line collapse" (more correctly known as wrapping) when dealing with horizontally floated elements. Currently (afaik) if you wish to create - for example - a horizontally scrolling website made of out many floated elements. You have to set the sum total width of the floated children on the parent container. Otherwise the elements will just wrap when then hit the side of the viewport.

Now I know there are possibly white-space css properties or even word-wrapping properties that could be used, but these never seem to work 100% cross-browser, and probably shouldn't be used to affect floated elements. Which is why setting the sum total has always been a better solution.. but obviously this involves either having fixed hard-coded content, or some programmatical way of calculating the width for the parent (PHP, JS). FlexBox actually allows you to control the flow of the children which should do away with this annoying problem entirely - just need to state the flow as being constantly horizontal. Obviously I need to research this though.