5 ms·

Doesn't Flexbox pretty much solve this problem? I mean, if you need to maintain backwards compatibility this might be reasonable, but "justify-content: center"

by mhink 12y ago

Doesn't Flexbox pretty much solve this problem? I mean, if you need to maintain backwards compatibility this might be reasonable, but "justify-content: center" and "align-items: center" seem to work unreasonably well for this exact purpose.

nkozyra 12y ago
Flexbox solves this problem but it's still a bit unwieldy and verbose.
- sondr3 12y ago
  Verbose? Compared to the other solutions it's a godsend, just use the CSS-tricks guide for it and you'll have nearly zero problems. I absolutely love it and pretty much refuse to use anything else for layout in CSS now.
  - Cub3 12y ago
    Just remember IE10 only supports the 2010 flexbox spec (you can't inline-flex, need -ms-prefix etc.)
  - nkozyra 12y ago
    Compared to the rest of the CSS spec, I'd say so. It certainly solves the problem much better, though.
  - drcode 12y ago
    IMHO constraint systems like GSS (http://gridstylesheets.org/ http://gridstylesheets.org/) handle centering in a much cleaner way. Pity that approach hasn't gotten any traction (though some people smarter than me say it's a bad idea, so who knows what the right answer is...)
    - woah 12y ago
      I much prefer the deterministic flex box to the mysterious auto layout, even if you might have to use a container div here and there. I think constraint solving is a fascinating idea, but it always seems to end up involving me setting magic priority numbers with little understanding as to why.
    - ux-app 12y ago
      When I first heard of GSS I thought it was the solution to layout that we'd all been waiting for. Unfortunately it's not all roses. It's possible, and quite easy to inadvertently create cyclical constraint dependencies. Depending on how your constraint solver is written this might mean that a layout will fail or that your system will lock or crash. I'm subscribed to a couple of constraint solver mailing lists. A common question is "why is my constraint solver doing this...?", or "how do I massage my constraints to achieve this...?" With CSS You can't build a layout that 'fails' (in the sense that a solution cannot be computed due to improperly defined dependencies), and you certainly can't send your browser into an infinite loop by applying an incorrect style. I still really like the idea of constraint based systems, but I think they are more suited to (web)applications rather than documents.
      - TeMPOraL 12y ago
        > I still really like the idea of constraint based systems, but I think they are more suited to (web)applications rather than documents. Which is what some people will tell you web is about when you point out to them they're doing something weird instead of writing a document communicating a message. Maybe it's time to separate those two use cases - web pages and web applications - because otherwise people will keep getting confused between the needs and problems of the two? Anyway, GSS looks pretty cool.
  - look_lookatme 12y ago
    I agree, flexbox is refreshing. Couple it with autoprefixer or a flexbox scss mixin, layout a design with it for the first time and you won't go back. For people that are use to hacks + grid systems, it seems weird at first, but over time you will become familiar with a rich layout system and stop thinking left-to-right, it will become more natural. The language of the spec and the declarations (align/justify distinctions, etc) can be weird at first, but you get used to it.
- mambodog 12y ago
  Flexbox can be a bit low level, but with it you can build abstractions (eg. classes or preprocessor mixins) for common use cases, which I think is preferable to having only a high-level tool which can't cover all use cases.
  - cvan 12y ago
    write using modern/stable flexbox syntax and use autoprefixer for older browsers: https://github.com/postcss/autoprefixer https://github.com/postcss/autoprefixer
- dominotw 12y ago
  Verbose?

by mhink 12y ago

nkozyra 12y ago

Flexbox solves this problem but it's still a bit unwieldy and verbose.

sondr3 12y ago
Verbose? Compared to the other solutions it's a godsend, just use the CSS-tricks guide for it and you'll have nearly zero problems. I absolutely love it and pretty much refuse to use anything else for layout in CSS now.
- Cub3 12y ago
  Just remember IE10 only supports the 2010 flexbox spec (you can't inline-flex, need -ms-prefix etc.)
- nkozyra 12y ago
  Compared to the rest of the CSS spec, I'd say so. It certainly solves the problem much better, though.
- drcode 12y ago
  IMHO constraint systems like GSS (http://gridstylesheets.org/ http://gridstylesheets.org/) handle centering in a much cleaner way. Pity that approach hasn't gotten any traction (though some people smarter than me say it's a bad idea, so who knows what the right answer is...)
  - woah 12y ago
    I much prefer the deterministic flex box to the mysterious auto layout, even if you might have to use a container div here and there. I think constraint solving is a fascinating idea, but it always seems to end up involving me setting magic priority numbers with little understanding as to why.
  - ux-app 12y ago
    When I first heard of GSS I thought it was the solution to layout that we'd all been waiting for. Unfortunately it's not all roses. It's possible, and quite easy to inadvertently create cyclical constraint dependencies. Depending on how your constraint solver is written this might mean that a layout will fail or that your system will lock or crash. I'm subscribed to a couple of constraint solver mailing lists. A common question is "why is my constraint solver doing this...?", or "how do I massage my constraints to achieve this...?" With CSS You can't build a layout that 'fails' (in the sense that a solution cannot be computed due to improperly defined dependencies), and you certainly can't send your browser into an infinite loop by applying an incorrect style. I still really like the idea of constraint based systems, but I think they are more suited to (web)applications rather than documents.
    - TeMPOraL 12y ago
      > I still really like the idea of constraint based systems, but I think they are more suited to (web)applications rather than documents. Which is what some people will tell you web is about when you point out to them they're doing something weird instead of writing a document communicating a message. Maybe it's time to separate those two use cases - web pages and web applications - because otherwise people will keep getting confused between the needs and problems of the two? Anyway, GSS looks pretty cool.
- look_lookatme 12y ago
  I agree, flexbox is refreshing. Couple it with autoprefixer or a flexbox scss mixin, layout a design with it for the first time and you won't go back. For people that are use to hacks + grid systems, it seems weird at first, but over time you will become familiar with a rich layout system and stop thinking left-to-right, it will become more natural. The language of the spec and the declarations (align/justify distinctions, etc) can be weird at first, but you get used to it.
mambodog 12y ago
Flexbox can be a bit low level, but with it you can build abstractions (eg. classes or preprocessor mixins) for common use cases, which I think is preferable to having only a high-level tool which can't cover all use cases.
- cvan 12y ago
  write using modern/stable flexbox syntax and use autoprefixer for older browsers: https://github.com/postcss/autoprefixer https://github.com/postcss/autoprefixer
dominotw 12y ago
Verbose?