4 ms·

Amazing, I had always heard flexbox being touted as the "next big thing" but it had come across as confusing and obscure. This was a great tutorial and I will d

Amazing, I had always heard flexbox being touted as the "next big thing" but it had come across as confusing and obscure. This was a great tutorial and I will definitely be using flexbox in the future. It seems to almost eliminate the need for a grid system a la bootstrap, which is great because I know a lot of people that use bootstrap specifically for the grid system and throw out/re implement all of the other parts.

masklinn 12y ago
> It seems to almost eliminate the need for a grid system a la bootstrap Having classes/mixins is convenient, rather than need to implement the properties "by hand" all the time. But it does get rid of most of the complexity and compatibility issues, and provides additional features (source-order independence, column-major display, ...)
Alex3917 12y ago
For what it's worth, the tradition wisdom is that flexbox is meant for widgets (e.g. the social icons in your sidebar), not for the main layout of your content.
- nailer 12y ago
  The FB CSS replacement (sorry, can't remember what it was called) used it for nearly every block element.
- nostrademons 12y ago
  Traditional wisdom gets overturned awfully quickly when people find out that tools can be used in new ways.
- krebby 12y ago
  No way. It's great for layouts too, particularly the ever-difficult fluid-3-column-on-desktop-to-one-column-on-mobile "holy grail" layout [0]. That site has a few other great examples like media objects that would usually take a ton of CSS hacking but are solved easily with flexbox [1]. [0] http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ http://philipwalton.github.io/solved-by-flexbox/demos/holy-g... [1] http://philipwalton.github.io/solved-by-flexbox/ http://philipwalton.github.io/solved-by-flexbox/
bonn1 12y ago
> but it had come across as confusing I would disagree here, there is another great resource online for 2 years and showing up as #1 on Google when searching: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
nostrademons 12y ago
Polymer has a really great flexbox helper that relies on attributes to add the appropriate flexbox properties. Just add 'layout' to the container, and then 'horizontal' or 'vertical'. Any element you want to grow, add 'flex': https://www.polymer-project.org/docs/polymer/layout-attrs.html https://www.polymer-project.org/docs/polymer/layout-attrs.ht...
- nostrademons 12y ago
  Edit: which was removed 19 days ago: https://github.com/Polymer/polymer/commit/d45aa98c9267153ce020fdfbe04d9cdd2750e1cd https://github.com/Polymer/polymer/commit/d45aa98c9267153ce0... I guess looking at how verbose the implementation was and what it actually gives you over learning the CSS, you're probably better off learning the CSS.
  - spankalee 12y ago
    I think it'll be sticking around, just not in Polymer core. Core should be as focused as possible.

masklinn 12y ago

> It seems to almost eliminate the need for a grid system a la bootstrap Having classes/mixins is convenient, rather than need to implement the properties "by hand" all the time. But it does get rid of most of the complexity and compatibility issues, and provides additional features (source-order independence, column-major display, ...)

Alex3917 12y ago

For what it's worth, the tradition wisdom is that flexbox is meant for widgets (e.g. the social icons in your sidebar), not for the main layout of your content.

nailer 12y ago
The FB CSS replacement (sorry, can't remember what it was called) used it for nearly every block element.
nostrademons 12y ago
Traditional wisdom gets overturned awfully quickly when people find out that tools can be used in new ways.
krebby 12y ago
No way. It's great for layouts too, particularly the ever-difficult fluid-3-column-on-desktop-to-one-column-on-mobile "holy grail" layout [0]. That site has a few other great examples like media objects that would usually take a ton of CSS hacking but are solved easily with flexbox [1]. [0] http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ http://philipwalton.github.io/solved-by-flexbox/demos/holy-g... [1] http://philipwalton.github.io/solved-by-flexbox/ http://philipwalton.github.io/solved-by-flexbox/

bonn1 12y ago

> but it had come across as confusing I would disagree here, there is another great resource online for 2 years and showing up as #1 on Google when searching: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

nostrademons 12y ago

Polymer has a really great flexbox helper that relies on attributes to add the appropriate flexbox properties. Just add 'layout' to the container, and then 'horizontal' or 'vertical'. Any element you want to grow, add 'flex': https://www.polymer-project.org/docs/polymer/layout-attrs.html https://www.polymer-project.org/docs/polymer/layout-attrs.ht...

nostrademons 12y ago
Edit: which was removed 19 days ago: https://github.com/Polymer/polymer/commit/d45aa98c9267153ce020fdfbe04d9cdd2750e1cd https://github.com/Polymer/polymer/commit/d45aa98c9267153ce0... I guess looking at how verbose the implementation was and what it actually gives you over learning the CSS, you're probably better off learning the CSS.
- spankalee 12y ago
  I think it'll be sticking around, just not in Polymer core. Core should be as focused as possible.