

CSS Flexbox Please - cleverjake
http://demo.agektmr.com/flexbox/

======
ned
Flexbox is the most underrated CSS modules out there. Making flexible layouts
based on the size of the viewport without it is either a major pain or flat
out impossible without resorting to JS.

I don't understand why all the CSS efforts are being put into elaborate
effects (transforms, blend modes, compositing, etc) when we can't yet
effectively create UI layouts. Other underrated property is the non-standard
"-webkit-line-clamp" (or "-o-ellipsis-lastline" for Opera), that allows you to
cut off with an ellipsis a block of text after a given number of lines.

It's such a shame that the idea of constraints-based layout (the UI layout
method of OSX 10.8) in CSS was never adopted:
[http://www.cs.washington.edu/research/constraints/web/ccss-u...](http://www.cs.washington.edu/research/constraints/web/ccss-
uwtr.pdf)

------
po
Also checkout the flexie shim and flexbox playground:

<https://github.com/doctyper/flexie>

<http://flexiejs.com/playground/>

------
bgarbiak
Honestly, I found flexbox to be a mess. Old specs, new specs, polyfills,
vendor prefixes and so on make it painful to implement. And once you succeed
the code looks horribly. Heck, the code isn't that much clearer even if you
resort to pure latest specification. Basically, flexbox doesn't make things
much easier than the old 'hackery' solutions.

Furthermore, alternative proposals looks way more sensible.

Layout Templates: <http://www.w3.org/TR/2009/WD-css3-layout-20090402/> (demos:
<http://a.deveria.com/csstpl/>, javascript polyfill:
<http://code.google.com/p/css-template-layout/>)

Grid Layout: <http://dev.w3.org/csswg/css3-grid-layout/> (IE10 demo:
[http://ie.microsoft.com/testdrive/graphics/hands-on-
css3/han...](http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-
on_grid.htm))

------
jordanmoore_
This is essentially the same idea as something I wrote a while back
(compatible in iOS Safari, Android browsers etc) Demo -
<http://www.jordanm.co.uk/lab/contentchoreography> Article -
[http://www.jordanm.co.uk/post/21863299677/building-with-
cont...](http://www.jordanm.co.uk/post/21863299677/building-with-content-
choreography)

To clarify iOS6 safari and all major mobile browsers use the legacy flexbox
syntax. If you want to use the technique of small desktop contexts then use
new flexbox, otherwise use the legacy syntax alongside new flexbox to ensure
you cover all bases.

~~~
jordanmoore_
I should further clarify - my documented approach is for re-arranging layouts
for small viewports in responsive web design so flexbox only kicks in for
narrow widths.

The approach the author demonstrates is for using flexbox in general.

------
kalleboo
Browser support: <http://caniuse.com/flexbox>

Only Chrome for now it appears.

~~~
potch
Nah, the "partial" implementations are all highly compatible with the current
spec (which chrome implements), and it's not much more polyfill to achieve
solid cross-browser compat.

~~~
jarek-foksa
"Partial" implementations don't implement the current spec at all, check the
footnote. New flexbox uses completely different syntax than the old one and
it's impossible to polyfill it on IE8 and IE9 without excessive use of
JavaScript.

------
drivebyacct2
I actually quite enjoy using Microsoft's Grid proposal. I built a WinRT app
with it before realizing it's not a well-supported CSS box model.

~~~
ttrashh
Really enjoying grid layout. I wish it was well supported. Makes so much more
sense than what we have today.

