6 ms·

Or, just write the display:flex you need, where you need it, as little as you actually need.. easy as pie unless your deadline was days-ago. This here might sav

by dualogy 10y ago

Or, just write the display:flex you need, where you need it, as little as you actually need.. easy as pie unless your deadline was days-ago. This here might save you 10 minutes of manual work, at the expense of further code-base bloat, external-lib-dep accumulation, technical debt. OK fair game for your MVP-landing-page-A/B-split-test-shenanigans, granted.

franciscop 10y ago
I would call technical debt to writing it as you go, since there are many small bugs and inconsistencies that (hopefully) are fixed by these libraries. Just a couple of random examples: - https://github.com/picnicss/picnic/issues/79 https://github.com/picnicss/picnic/issues/79 - https://github.com/picnicss/picnic/issues/64 https://github.com/picnicss/picnic/issues/64 So you can have a half-baked solution with 10 more minutes or use a tested and documented one and save 10 minutes.
- threatofrain 10y ago
  I think a more on-point rebuttal would give us examples of flexbox-specific bugs.
  - franciscop 10y ago
    True, I thought it was widely know but there's a whole Flexbugs project [1] and that there are many Known Issues with flexbox [2]. Some with solution, some without them. [1] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs [2] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
    - irrational 10y ago
      Thank you! I've never heard of flexbugs.
matt4077 10y ago
Indeed. Flexbox made grids superfluous. Except people expect it.
- nilliams 10y ago
  Flexbox doesn't work in IE. It also doesn't solve the need for conventions around grid breakpoints, when e.g. working in a team. Doesn't come close to replacing Bootstrap 3 (and similar) grid systems IMO.
  - jacobr 10y ago
    You are incorrect, flexbox works in IE10 and up. Works fine in Edge without any prefixes even.
    - nilliams 10y ago
      You are incorrect. IE10 implements the wrong spec and it's buggy in IE11. And Edge isn't IE.
mpetrovich 10y ago
Besides lack of good cross-browser support until recently, I think there are a few reasons why flexbox is still less popular than float- or margin-based grids: - Steeper learning curve and less accessible than adding a class like "col-3" or "grid--1/2". The latter is almost self-explanatory. - Requires an existing or new CSS class to bind the styles to. If it's a new class, you have to figure out a good name (which isn't always easy, naming things is hard). - Requires editing CSS/Less/Sass, which (depending on your setup) can require waiting for it to compile. The wait time for compiling/bundling HTML is usually negligible. - Traditional grid systems just work, and they work well enough for most things. When you have more important & interesting problems than a CSS grid system, there's a bias towards shipping what works and moving on. That being said, flexbox is really powerful and a great tool for many things. But for many simple layouts, traditional grid systems can get the job done just fine without requiring much initial investment. On interdisciplinary teams where non-frontend devs can contribute, end-user simplicity is sometimes more important than language sophistication.
- paulojreis 10y ago
  ... and it relies on DOM structure. This is horrible, IMHO. Flex containers will layout the flex items, which are by definition its direct descendants. If by some reason [1] you get an extra DOM element between the flex container and the item you intend to layout, then you're in for a rewrite of the CSS and maybe some extra classes. Also, this bug in Webkit is rather inconvenient: https://github.com/philipwalton/flexbugs/issues/115 https://github.com/philipwalton/flexbugs/issues/115 [1] For instance, if you create an Angular element directive.
  - kylecordes 10y ago
    Yes! Flex box has lots going for it, but it breaks a "feature" that many web developers and framework developers have relied on since the earliest days: it being mostly harmless add an extra layer of element at a whim anywhere. One could argue this is a lousy feature (and I would agree). But lots of developers and lots of frameworks do it.
    - 10y ago

by dualogy 10y ago

franciscop 10y ago

I would call technical debt to writing it as you go, since there are many small bugs and inconsistencies that (hopefully) are fixed by these libraries. Just a couple of random examples: - https://github.com/picnicss/picnic/issues/79 https://github.com/picnicss/picnic/issues/79 - https://github.com/picnicss/picnic/issues/64 https://github.com/picnicss/picnic/issues/64 So you can have a half-baked solution with 10 more minutes or use a tested and documented one and save 10 minutes.

threatofrain 10y ago
I think a more on-point rebuttal would give us examples of flexbox-specific bugs.
- franciscop 10y ago
  True, I thought it was widely know but there's a whole Flexbugs project [1] and that there are many Known Issues with flexbox [2]. Some with solution, some without them. [1] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs [2] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
  - irrational 10y ago
    Thank you! I've never heard of flexbugs.

matt4077 10y ago

Indeed. Flexbox made grids superfluous. Except people expect it.

nilliams 10y ago
Flexbox doesn't work in IE. It also doesn't solve the need for conventions around grid breakpoints, when e.g. working in a team. Doesn't come close to replacing Bootstrap 3 (and similar) grid systems IMO.
- jacobr 10y ago
  You are incorrect, flexbox works in IE10 and up. Works fine in Edge without any prefixes even.
  - nilliams 10y ago
    You are incorrect. IE10 implements the wrong spec and it's buggy in IE11. And Edge isn't IE.

mpetrovich 10y ago

Besides lack of good cross-browser support until recently, I think there are a few reasons why flexbox is still less popular than float- or margin-based grids: - Steeper learning curve and less accessible than adding a class like "col-3" or "grid--1/2". The latter is almost self-explanatory. - Requires an existing or new CSS class to bind the styles to. If it's a new class, you have to figure out a good name (which isn't always easy, naming things is hard). - Requires editing CSS/Less/Sass, which (depending on your setup) can require waiting for it to compile. The wait time for compiling/bundling HTML is usually negligible. - Traditional grid systems just work, and they work well enough for most things. When you have more important & interesting problems than a CSS grid system, there's a bias towards shipping what works and moving on. That being said, flexbox is really powerful and a great tool for many things. But for many simple layouts, traditional grid systems can get the job done just fine without requiring much initial investment. On interdisciplinary teams where non-frontend devs can contribute, end-user simplicity is sometimes more important than language sophistication.

paulojreis 10y ago
... and it relies on DOM structure. This is horrible, IMHO. Flex containers will layout the flex items, which are by definition its direct descendants. If by some reason [1] you get an extra DOM element between the flex container and the item you intend to layout, then you're in for a rewrite of the CSS and maybe some extra classes. Also, this bug in Webkit is rather inconvenient: https://github.com/philipwalton/flexbugs/issues/115 https://github.com/philipwalton/flexbugs/issues/115 [1] For instance, if you create an Angular element directive.
- kylecordes 10y ago
  Yes! Flex box has lots going for it, but it breaks a "feature" that many web developers and framework developers have relied on since the earliest days: it being mostly harmless add an extra layer of element at a whim anywhere. One could argue this is a lousy feature (and I would agree). But lots of developers and lots of frameworks do it.
  - 10y ago