4 ms·

CSS Flexbox Please

36 points by cleverjake 14y ago

kalleboo 14y ago
Browser support: http://caniuse.com/flexbox http://caniuse.com/flexbox Only Chrome for now it appears.
- potch 14y 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 14y 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 14y ago
Also checkout the flexie shim and flexbox playground: https://github.com/doctyper/flexie https://github.com/doctyper/flexie http://flexiejs.com/playground/ http://flexiejs.com/playground/
drivebyacct2 14y 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 14y ago
  I quite like -ms-grid, it's simpler and easier to understand imo than flexbox.
- ttrashh 14y ago
  Really enjoying grid layout. I wish it was well supported. Makes so much more sense than what we have today.
jordanmoore_ 14y 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 http://www.jordanm.co.uk/lab/contentchoreography Article - http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography 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_ 14y 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.
- gcb 14y ago
  minus the column mode part...
ned 14y 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-uwtr.pdf http://www.cs.washington.edu/research/constraints/web/ccss-u...
bgarbiak 14y 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/ http://www.w3.org/TR/2009/WD-css3-layout-20090402/ (demos: http://a.deveria.com/csstpl/ http://a.deveria.com/csstpl/, javascript polyfill: http://code.google.com/p/css-template-layout/ http://code.google.com/p/css-template-layout/) Grid Layout: http://dev.w3.org/csswg/css3-grid-layout/ http://dev.w3.org/csswg/css3-grid-layout/ (IE10 demo: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_grid.htm http://ie.microsoft.com/testdrive/graphics/hands-on-css3/han...)

CSS Flexbox Please

36 points by cleverjake 14y ago

kalleboo 14y ago

Browser support: http://caniuse.com/flexbox http://caniuse.com/flexbox Only Chrome for now it appears.

potch 14y 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 14y 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 14y ago

Also checkout the flexie shim and flexbox playground: https://github.com/doctyper/flexie https://github.com/doctyper/flexie http://flexiejs.com/playground/ http://flexiejs.com/playground/

drivebyacct2 14y 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 14y ago
I quite like -ms-grid, it's simpler and easier to understand imo than flexbox.
ttrashh 14y ago
Really enjoying grid layout. I wish it was well supported. Makes so much more sense than what we have today.

jordanmoore_ 14y 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 http://www.jordanm.co.uk/lab/contentchoreography Article - http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography 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_ 14y 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.
gcb 14y ago
minus the column mode part...

ned 14y 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-uwtr.pdf http://www.cs.washington.edu/research/constraints/web/ccss-u...

bgarbiak 14y 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/ http://www.w3.org/TR/2009/WD-css3-layout-20090402/ (demos: http://a.deveria.com/csstpl/ http://a.deveria.com/csstpl/, javascript polyfill: http://code.google.com/p/css-template-layout/ http://code.google.com/p/css-template-layout/) Grid Layout: http://dev.w3.org/csswg/css3-grid-layout/ http://dev.w3.org/csswg/css3-grid-layout/ (IE10 demo: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_grid.htm http://ie.microsoft.com/testdrive/graphics/hands-on-css3/han...)