CSS Flexbox Please | Hacker News Reader

CSS Flexbox Please

demo.agektmr.com

36 pointscleverjake11 comments

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

Also checkout the flexie shim and flexbox playground:

https://github.com/doctyper/flexie

http://flexiejs.com/playground/

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

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.

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.

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

Only Chrome for now it appears.

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.

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

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.

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

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

Reply on news.ycombinator.com