CSS Flexbox Please

http://demo.agektmr.com/flexbox/

by cleverjake • 14 years ago

36 11 14 years ago

demo.agektmr.com

kalleboo• 14 years ago

Browser support: http://caniuse.com/flexbox

Only Chrome for now it appears.

potch• 14 years ago

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• 14 years ago

"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.

po• 14 years ago

Also checkout the flexie shim and flexbox playground:

https://github.com/doctyper/flexie

http://flexiejs.com/playground/

drivebyacct2• 14 years ago

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.

TazeTSchnitzel• 14 years ago

I quite like -ms-grid, it's simpler and easier to understand imo than flexbox.

ttrashh• 14 years ago

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

jordanmoore_2• 14 years ago

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...

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_2• 14 years ago

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.

ned• 14 years ago

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...

bgarbiak• 14 years ago

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...)

CSS Flexbox Please

Related Stories