4 ms·

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ http://flexboxin5.

by DiThi 12y ago

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox

jimmcslim 12y ago
I've understood that Flexbox is what you should use for 'small layout' (controls, etc) but ultimately we should be using the new CSS grid module for 'large layout' (pages). http://dev.w3.org/csswg/css-grid/ http://dev.w3.org/csswg/css-grid/ Of course, it might be a while until there is broad browser support! http://caniuse.com/#feat=css-grid http://caniuse.com/#feat=css-grid
- runarberg 12y ago
  I'd think you should use flexbox for what it's good at --calculating and distributing the available space on it's children-- and grid for what it's good at --enforcing strict and precise layout outlines--.
lnanek2 12y ago
Hmm, that http://flexboxin5.com/ http://flexboxin5.com/ site didn't work in Chrome at all. Claimed it was going to resize when I pressed resize it early on and did nothing.
- phamilton 12y ago
  Same. Debug console: main.js:769 made it this far main.js:1182 nope, not happenin today sir.
  - davesque 12y ago
    Hmm...I didn't have any problems with it in Chrome.
- SquareWheel 12y ago
  Works fine here. You might have an extension that's breaking something? Try an incognito window as a quick test, which should disable extensions.
- nness 12y ago
  No issues with Chrome 42 on OSX 10.10. That said, that particularly site its quite complex in how it handles updating the DOM, so might not be the best example anyway.
WalterGR 12y ago
What's the best polyfill for flexbox?
- robin_reala 12y ago
  Add autoprefixer to your build chain: https://github.com/postcss/autoprefixer https://github.com/postcss/autoprefixer
supercoder 12y ago
That site is completely broken in Safari. Don't think we're ready for flexbox just yet.
- DiThi 12y ago
  Safari needs prefixing and I think that site doesn't have prefixes.
- yAnonymous 12y ago
  It's not the site that's broken, but Safari.
  - scotty79 12y ago
    What's broken is not Safari but people who buy Macs. ... I can't go any deeper. Still I'd like my site to look good to a meaningful market share.
    - yAnonymous 12y ago
      True, but I wouldn't say 4% is a meaningful market share, so fuck Safari. It's the new Internet Explorer. Leaving the sites broken in Safari (and maybe adding a notice that explains why it's broken) also helps keeping it at 4%.
      - extra88 12y ago
        Safari is also the native browser for iOS. I don't know where you got 4% from but Safari (both for OS X and iOS) is more than 4% market share.
      - mrspeaker 12y ago
        As a web dev, I get it - but if you have a million visitors then you're saying "fuck you" to 40,000 people. If I was _paying_ a web dev, I'm not sure I'd be satisfied with this response.
      - supercoder 12y ago
TheLoneWolfling 12y ago
JS;DR. So: is it not degrading gracefully a property of the site, or a property of Flexbox?

by DiThi 12y ago

jimmcslim 12y ago

I've understood that Flexbox is what you should use for 'small layout' (controls, etc) but ultimately we should be using the new CSS grid module for 'large layout' (pages). http://dev.w3.org/csswg/css-grid/ http://dev.w3.org/csswg/css-grid/ Of course, it might be a while until there is broad browser support! http://caniuse.com/#feat=css-grid http://caniuse.com/#feat=css-grid

runarberg 12y ago
I'd think you should use flexbox for what it's good at --calculating and distributing the available space on it's children-- and grid for what it's good at --enforcing strict and precise layout outlines--.

lnanek2 12y ago

Hmm, that http://flexboxin5.com/ http://flexboxin5.com/ site didn't work in Chrome at all. Claimed it was going to resize when I pressed resize it early on and did nothing.

phamilton 12y ago
Same. Debug console: main.js:769 made it this far main.js:1182 nope, not happenin today sir.
- davesque 12y ago
  Hmm...I didn't have any problems with it in Chrome.
SquareWheel 12y ago
Works fine here. You might have an extension that's breaking something? Try an incognito window as a quick test, which should disable extensions.
nness 12y ago
No issues with Chrome 42 on OSX 10.10. That said, that particularly site its quite complex in how it handles updating the DOM, so might not be the best example anyway.

WalterGR 12y ago

What's the best polyfill for flexbox?

robin_reala 12y ago
Add autoprefixer to your build chain: https://github.com/postcss/autoprefixer https://github.com/postcss/autoprefixer

supercoder 12y ago

That site is completely broken in Safari. Don't think we're ready for flexbox just yet.

DiThi 12y ago
Safari needs prefixing and I think that site doesn't have prefixes.
yAnonymous 12y ago
It's not the site that's broken, but Safari.
- scotty79 12y ago
  What's broken is not Safari but people who buy Macs. ... I can't go any deeper. Still I'd like my site to look good to a meaningful market share.
  - yAnonymous 12y ago
    True, but I wouldn't say 4% is a meaningful market share, so fuck Safari. It's the new Internet Explorer. Leaving the sites broken in Safari (and maybe adding a notice that explains why it's broken) also helps keeping it at 4%.
    - extra88 12y ago
      Safari is also the native browser for iOS. I don't know where you got 4% from but Safari (both for OS X and iOS) is more than 4% market share.
    - mrspeaker 12y ago
      As a web dev, I get it - but if you have a million visitors then you're saying "fuck you" to 40,000 people. If I was _paying_ a web dev, I'm not sure I'd be satisfied with this response.
    - supercoder 12y ago

TheLoneWolfling 12y ago

JS;DR. So: is it not degrading gracefully a property of the site, or a property of Flexbox?