5 ms·

Flexbox in 5 minutes

197 points by spking 11y ago

namuol 11y ago
Flexbox in 5 minutes* * (Not including 6 hours of painstaking hacks to make it work with Safari and IE10) ;) I love Flexbox and use it for all my projects now, but yeah: it's important to keep in mind that a lot of browsers out there have a buggy/incomplete implementation of it. This is a great resource if you're just starting to use flexbox in a real-world webapp and want to catch issues early: https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
- veidr 11y ago
  Yep! As mainly an Objective-C programmer (and not much of a web developer) I was very excited about flexbox when I had to work on a native OS X app that edits grids of photos in the app but also exports to web. Legacy browsers were not a requirement (yay!) so I was all over flexbox, and indeed it took about 5 minutes to get it working perfectly in Firefox and Chrome. Sadly, after another 20+ hours of trying to get it working in Safari we had to declare it a failed effort, and give up on flexbox. It almost worked but Safari had layout bugs that would render things in the wrong place, or inappropriately partially outside the visible bounds of the window. (This was -- checks git -- April 2015. I still click every link about flexbox on HN waiting to see somebody say it Safari support for it has improved.)
  - dmix 11y ago
    Are there no polyfills/css libraries to take care of Safari?
    - namuol 11y ago
      I find it's better to be aware of/vigilant about the common bugs in flexbox's implementation, and explicitly fix specific problems as you encounter them. I've never found a polyfill that doesn't rely on hacks that lead to even-harder-to-fix problems. It would be great for there to be a sort of CSS linter that could help here, but I haven't found one yet.
  - tempodox 11y ago
    Nope, Safari 8.0.8 still has `flexbox` rendering bugs as per the posted demo link.
  - andrewgleave 11y ago
    Safari 9.0 and WebKit builds seem to show conformance in my limited testing.
    - veidr 11y ago
      HEY! Just came back here to say you are right. Installed the developer beta of OS X 10.11 today (which includes Safari 9) and tried to open some of the output files from the old project mentioned above. They all work in OS X Safari now. None of them really stress-test flexbox or do anything advanced; they are just grids that are supposed to resize well. But, the bugs we hit doing this basic stuff in OS X 10.10 / Safari 8 seem to be fixed.
- thoman23 11y ago
  Agreed. I love Flexbox too, but you can't ignore the fact that this very same flexboxin5 tutorial site is completely broken in Safari and has been for months.
  - deleted 11y ago
    [deleted]
  - talmand 11y ago
    The site is not broken in Safari, it's Safari's implementation of Flex that is broken. Let's be sure to lay the blame where it belongs.
- deleted 11y ago
  [deleted]
- deleted 11y ago
  [deleted]
- dahart 11y ago
  I think I only use a fraction of flexbox's capability, but I don't seem to have any more trouble in Safari, even iOS, than any other browser... are there some known issues in Safari? Beyond what is listed here in the known issues section? http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox Pretty sure I've hit every single one of those. I do use autoprefixer, maybe that helps. But in general, flexbox is the only layout model that makes any sense to me for building web apps, and support seems decent to me and only improving from here out. Curious if my outlook seems more positive than what I'm reading here because I'm getting lucky and missing some of the ugly flexbox bugs others are running into?
  - uxwtf 11y ago
    As a designer I love the equal positioning that flexbox offers. I tried to use it for some projects, but it needs some more work on browsers compatibility. Here's how the site looks for me in Safari 8.0.8: http://imgur.com/aYwYTDx http://imgur.com/aYwYTDx Safari seems to refuse reading flex style: http://imgur.com/LEhtYBZ http://imgur.com/LEhtYBZ
    - nmjenkins 11y ago
      That's because flexbox is still prefixed in Safari 8 (see http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox). Just add -webkit- versions of all of the properties as well and it will probably work. e.g. "display: -webkit-flex".
      - thirdsun 11y ago
        Yes, pretty disappointing that a tutorial on flexbox fails to prefix its styling rules - which in this case is very much essential to make your point. Since I use autoprefixer in all my projects and only need to cover moderately modern and relevant browsers, flexbox has been a regular companion for me - without any problems. So many layout headaches that can be avoided with this great addition to CSS.
blintzing 11y ago
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ CSS-Tricks has a pretty handy guide, too. If I need a quick reference when developing, that and MDN are my go to.
- talmand 11y ago
  Since another posted the same link, I'll post my response here as well with an additional link. https://css-tricks.com/using-flexbox/ https://css-tricks.com/using-flexbox/
wesbos 11y ago
This is a great guide. I've also got a set of free videos for learning flexbox as it's such a visual thing http://flexbox.io http://flexbox.io
- wmboy 11y ago
  I signed up to this when you posted it on Hacker News...never got an email from you though? (just searched my email for flexbox.io to check)
nfriedly 11y ago
I'm really looking forward to being able to use flexbox, but, well, I think a screenshot says it best: http://imgur.com/mUVouiJ http://imgur.com/mUVouiJ
- kagamine 11y ago
  Maybe it's not broken, maybe it's a new trend, in this information rich modern world having text to read isn't enough, we need text on top of the text so we can double read and process information twice as fast as before. Safari is just way ahead of the game. #fanboi
- talmand 11y ago
  Your screenshot says nothing about flexbox. It says more about the site's implementation of it and the browser you are currently using.
- exodust 11y ago
  Oh come on, are you serious? The site is not intended for web developers who "learn about web dev on their phones". It's an interactive demonstration where you can see and learn about all that flexbox can do. And it's done very well. The presentation makes use of multiple panels you need to see at once. Please don't make foolish comments about it not working on a phone. Tip: put your phone down. Grab yourself a computer of some description, at the very least a laptop. Take another look at flexboxin5 because it's really good.
wiradikusuma 11y ago
Distantly related, but might be useful for anyone using Bootstrap, flexbox doesn't seem to work with Bootstrap' carousel.
hardwaresofton 11y ago
Fantastic guide, I've seen flexbox around but haven't looked into it because of browser support issues, but this guide was a great (quick) primer on how to use flexboxes and how amazing (and relatively easy to use) they are. Even if you can't use flexboxes right now, I still think this is a worthwhile guide to look at -- especially if you can control the devices/browsers you support (and it doesn't hurt your core business too much)
sudo_bang_bang 11y ago
Definitely look at this before you use React Native. RN makes heavy use of flexbox for layouts, and if you come from living in a world of <div style="position: relative; margin-left: x;"> then it can be a bit foreign. As for browsers, I'm still waiting on more flexbox adoption.
srameshr 11y ago
Really cool! This paired with https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ makes up really good tools for learning and quick ref for flexbox.
- talmand 11y ago
  For explanations of older browsers implementation, there's this as well. https://css-tricks.com/using-flexbox/ https://css-tricks.com/using-flexbox/
Tomte 11y ago
I was looking into flexbox a little time ago and came away with the impression that display:table, while a bit less elegant, is substantially better supported and a plausible solution for right now. Flexbox seemed to be more a possibility for some unspecified future. (In that both are only supported in relatively recent browsers, but display:table was supported a bit further back, and across some important point, probably some important IE version, but I don't remember the details). Has that changed?
- oblio 11y ago
  display: table is cool but as far as I remember if you want to do something equivalent to colspan or rowspan you're in for a lot of trouble... :(
- azernik 11y ago
  Nope [1] - IE support only landed in IE10, and is only really usable in IE11 and Edge. In general, IE 8 and under is currently the cutoff for legacy browsers that no modern web technologies and polyfills will bother supporting anyway, and display:table is supported at least that far back [2]. [1] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox [2] http://caniuse.com/#feat=css-table http://caniuse.com/#feat=css-table
- ghinda 11y ago
  Ironically IE9+ support for display:table is worse then IE8-, especially regarding inherited dimensions on child elements. I wrote a small grid library[1] using display:table, as a flexbox alternative for older browsers, and had no choice but to use js to fix IE support. Firefox also has some issues, don't know if because of the spec or the implementation, but those can be worked around with css. [1] https://github.com/ghinda/gridlayout https://github.com/ghinda/gridlayout
- lenkite 11y ago
  How do you wrap lines using display:table ? Flexbox allows wrapping and alignment along the cross-axis.
JDiculous 11y ago
This is a repost from like 6 months ago.
- Kiro 11y ago
  It says that Firefox 28 was just released which means it's from early 2014.
Kiro 11y ago
> ...while we've got these three fixed-width items here, take a minute or two to explore the container styling options at the top of the page. Where?
paublyrne 11y ago
Previously discussed: https://news.ycombinator.com/item?id=9137515 https://news.ycombinator.com/item?id=9137515
boxcardavin 11y ago
Advantage over Bootstrap in 5 seconds?
- andreamazz 11y ago
  It's meant to be used alongside the grid system of bootstrap/foundation/pure/etc... As a rule of thumb: grid system for the general positioning in the page, flexbox to align the items of the block.
- azernik 11y ago
  They go together; Bootstrap 4 will have an option to use flexboxes to implement its grid system. It's an option and not the default because there are a lot of browsers out there that don't support flexboxes yet; give it a few years and this will be a much more practical choice.
- thirdsun 11y ago
  That's like asking about the advantage of driving a stick shift over a Mercedes Benz.
ben_bai 11y ago
Does not render right on my mobile.
- ben_bai 11y ago
  Does not render right in Firefox 40.0.3, too. Tried different Window sizes, some blow up the Layout
  - talmand 11y ago
    I think it's more likely it doesn't render correctly in your Firefox.
at-fates-hands 11y ago
I love Flex Box, but the myriad of errors in Safari has left me disappointed. I'm still puzzled why they continue to push this without addressing any of these issues. Considering a majority of my clients and their customers use Safari on mobile, this is a total non-starter for me. This also sucks because I was really liking the Angular Material framework and can't use it because its based on Flexbox as well. Considering this site has been broken for months, I'm not optimistic this will get fixed any time soon.
- JayOtter 11y ago
  This is more of an issue with Safari than anything else - Apple's slow speed at keeping up with web standards is reasonably well documented (http://nolanlawson.com/2015/06/30/safari-is-the-new-ie/ http://nolanlawson.com/2015/06/30/safari-is-the-new-ie/) (note: this article generated a fair amount of controversy when it was originally posted on HN) I've just tried this site in the very newest OSX Safari and it looks dreadful. Disappointing.
exodust 11y ago
I've been holding back jumping into this because of browser support. But I'm tired of waiting. Flexbox is easily the best most exciting layout mode in CSS, and I need to start using it for site builds. Responsive the way it was meant to be. I'll figure something out for iOS compatibility and other mobile browsers that fall short. The benefits and potential are too good. I don't know why anyone would continue clutching to clunky grid frameworks and the tired old "3 things we do" look when these new layout modes are catching on. So much design potential without the pain means more affordable interesting responsive sites. I just hope the browsers lagging behind in support get their act together (Safari).

197 points by spking 11y ago

Flexbox in 5 minutes* * (Not including 6 hours of painstaking hacks to make it work with Safari and IE10) ;) I love Flexbox and use it for all my projects now, but yeah: it's important to keep in mind that a lot of browsers out there have a buggy/incomplete implementation of it. This is a great resource if you're just starting to use flexbox in a real-world webapp and want to catch issues early: https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs

veidr 11y ago
Yep! As mainly an Objective-C programmer (and not much of a web developer) I was very excited about flexbox when I had to work on a native OS X app that edits grids of photos in the app but also exports to web. Legacy browsers were not a requirement (yay!) so I was all over flexbox, and indeed it took about 5 minutes to get it working perfectly in Firefox and Chrome. Sadly, after another 20+ hours of trying to get it working in Safari we had to declare it a failed effort, and give up on flexbox. It almost worked but Safari had layout bugs that would render things in the wrong place, or inappropriately partially outside the visible bounds of the window. (This was -- checks git -- April 2015. I still click every link about flexbox on HN waiting to see somebody say it Safari support for it has improved.)
- dmix 11y ago
  Are there no polyfills/css libraries to take care of Safari?
  - namuol 11y ago
    I find it's better to be aware of/vigilant about the common bugs in flexbox's implementation, and explicitly fix specific problems as you encounter them. I've never found a polyfill that doesn't rely on hacks that lead to even-harder-to-fix problems. It would be great for there to be a sort of CSS linter that could help here, but I haven't found one yet.
- tempodox 11y ago
  Nope, Safari 8.0.8 still has `flexbox` rendering bugs as per the posted demo link.
- andrewgleave 11y ago
  Safari 9.0 and WebKit builds seem to show conformance in my limited testing.
  - veidr 11y ago
    HEY! Just came back here to say you are right. Installed the developer beta of OS X 10.11 today (which includes Safari 9) and tried to open some of the output files from the old project mentioned above. They all work in OS X Safari now. None of them really stress-test flexbox or do anything advanced; they are just grids that are supposed to resize well. But, the bugs we hit doing this basic stuff in OS X 10.10 / Safari 8 seem to be fixed.
thoman23 11y ago
Agreed. I love Flexbox too, but you can't ignore the fact that this very same flexboxin5 tutorial site is completely broken in Safari and has been for months.
- deleted 11y ago
  [deleted]
- talmand 11y ago
  The site is not broken in Safari, it's Safari's implementation of Flex that is broken. Let's be sure to lay the blame where it belongs.
deleted 11y ago
[deleted]
deleted 11y ago
[deleted]
dahart 11y ago
I think I only use a fraction of flexbox's capability, but I don't seem to have any more trouble in Safari, even iOS, than any other browser... are there some known issues in Safari? Beyond what is listed here in the known issues section? http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox Pretty sure I've hit every single one of those. I do use autoprefixer, maybe that helps. But in general, flexbox is the only layout model that makes any sense to me for building web apps, and support seems decent to me and only improving from here out. Curious if my outlook seems more positive than what I'm reading here because I'm getting lucky and missing some of the ugly flexbox bugs others are running into?
- uxwtf 11y ago
  As a designer I love the equal positioning that flexbox offers. I tried to use it for some projects, but it needs some more work on browsers compatibility. Here's how the site looks for me in Safari 8.0.8: http://imgur.com/aYwYTDx http://imgur.com/aYwYTDx Safari seems to refuse reading flex style: http://imgur.com/LEhtYBZ http://imgur.com/LEhtYBZ
  - nmjenkins 11y ago
    That's because flexbox is still prefixed in Safari 8 (see http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox). Just add -webkit- versions of all of the properties as well and it will probably work. e.g. "display: -webkit-flex".
    - thirdsun 11y ago
      Yes, pretty disappointing that a tutorial on flexbox fails to prefix its styling rules - which in this case is very much essential to make your point. Since I use autoprefixer in all my projects and only need to cover moderately modern and relevant browsers, flexbox has been a regular companion for me - without any problems. So many layout headaches that can be avoided with this great addition to CSS.

blintzing 11y ago

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ CSS-Tricks has a pretty handy guide, too. If I need a quick reference when developing, that and MDN are my go to.

talmand 11y ago
Since another posted the same link, I'll post my response here as well with an additional link. https://css-tricks.com/using-flexbox/ https://css-tricks.com/using-flexbox/

wesbos 11y ago

This is a great guide. I've also got a set of free videos for learning flexbox as it's such a visual thing http://flexbox.io http://flexbox.io

wmboy 11y ago
I signed up to this when you posted it on Hacker News...never got an email from you though? (just searched my email for flexbox.io to check)

nfriedly 11y ago

I'm really looking forward to being able to use flexbox, but, well, I think a screenshot says it best: http://imgur.com/mUVouiJ http://imgur.com/mUVouiJ

kagamine 11y ago
Maybe it's not broken, maybe it's a new trend, in this information rich modern world having text to read isn't enough, we need text on top of the text so we can double read and process information twice as fast as before. Safari is just way ahead of the game. #fanboi
talmand 11y ago
Your screenshot says nothing about flexbox. It says more about the site's implementation of it and the browser you are currently using.
exodust 11y ago
Oh come on, are you serious? The site is not intended for web developers who "learn about web dev on their phones". It's an interactive demonstration where you can see and learn about all that flexbox can do. And it's done very well. The presentation makes use of multiple panels you need to see at once. Please don't make foolish comments about it not working on a phone. Tip: put your phone down. Grab yourself a computer of some description, at the very least a laptop. Take another look at flexboxin5 because it's really good.

wiradikusuma 11y ago

Distantly related, but might be useful for anyone using Bootstrap, flexbox doesn't seem to work with Bootstrap' carousel.

hardwaresofton 11y ago

Fantastic guide, I've seen flexbox around but haven't looked into it because of browser support issues, but this guide was a great (quick) primer on how to use flexboxes and how amazing (and relatively easy to use) they are. Even if you can't use flexboxes right now, I still think this is a worthwhile guide to look at -- especially if you can control the devices/browsers you support (and it doesn't hurt your core business too much)

sudo_bang_bang 11y ago

Definitely look at this before you use React Native. RN makes heavy use of flexbox for layouts, and if you come from living in a world of <div style="position: relative; margin-left: x;"> then it can be a bit foreign. As for browsers, I'm still waiting on more flexbox adoption.

srameshr 11y ago

Really cool! This paired with https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ makes up really good tools for learning and quick ref for flexbox.

talmand 11y ago
For explanations of older browsers implementation, there's this as well. https://css-tricks.com/using-flexbox/ https://css-tricks.com/using-flexbox/

Tomte 11y ago

I was looking into flexbox a little time ago and came away with the impression that display:table, while a bit less elegant, is substantially better supported and a plausible solution for right now. Flexbox seemed to be more a possibility for some unspecified future. (In that both are only supported in relatively recent browsers, but display:table was supported a bit further back, and across some important point, probably some important IE version, but I don't remember the details). Has that changed?

oblio 11y ago
display: table is cool but as far as I remember if you want to do something equivalent to colspan or rowspan you're in for a lot of trouble... :(
azernik 11y ago
Nope [1] - IE support only landed in IE10, and is only really usable in IE11 and Edge. In general, IE 8 and under is currently the cutoff for legacy browsers that no modern web technologies and polyfills will bother supporting anyway, and display:table is supported at least that far back [2]. [1] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox [2] http://caniuse.com/#feat=css-table http://caniuse.com/#feat=css-table
ghinda 11y ago
Ironically IE9+ support for display:table is worse then IE8-, especially regarding inherited dimensions on child elements. I wrote a small grid library[1] using display:table, as a flexbox alternative for older browsers, and had no choice but to use js to fix IE support. Firefox also has some issues, don't know if because of the spec or the implementation, but those can be worked around with css. [1] https://github.com/ghinda/gridlayout https://github.com/ghinda/gridlayout
lenkite 11y ago
How do you wrap lines using display:table ? Flexbox allows wrapping and alignment along the cross-axis.

JDiculous 11y ago

This is a repost from like 6 months ago.

Kiro 11y ago
It says that Firefox 28 was just released which means it's from early 2014.

Kiro 11y ago

> ...while we've got these three fixed-width items here, take a minute or two to explore the container styling options at the top of the page. Where?

paublyrne 11y ago

Previously discussed: https://news.ycombinator.com/item?id=9137515 https://news.ycombinator.com/item?id=9137515

boxcardavin 11y ago

Advantage over Bootstrap in 5 seconds?

andreamazz 11y ago
It's meant to be used alongside the grid system of bootstrap/foundation/pure/etc... As a rule of thumb: grid system for the general positioning in the page, flexbox to align the items of the block.
azernik 11y ago
They go together; Bootstrap 4 will have an option to use flexboxes to implement its grid system. It's an option and not the default because there are a lot of browsers out there that don't support flexboxes yet; give it a few years and this will be a much more practical choice.
thirdsun 11y ago
That's like asking about the advantage of driving a stick shift over a Mercedes Benz.

ben_bai 11y ago

Does not render right on my mobile.

ben_bai 11y ago
Does not render right in Firefox 40.0.3, too. Tried different Window sizes, some blow up the Layout
- talmand 11y ago
  I think it's more likely it doesn't render correctly in your Firefox.

at-fates-hands 11y ago

I love Flex Box, but the myriad of errors in Safari has left me disappointed. I'm still puzzled why they continue to push this without addressing any of these issues. Considering a majority of my clients and their customers use Safari on mobile, this is a total non-starter for me. This also sucks because I was really liking the Angular Material framework and can't use it because its based on Flexbox as well. Considering this site has been broken for months, I'm not optimistic this will get fixed any time soon.

JayOtter 11y ago
This is more of an issue with Safari than anything else - Apple's slow speed at keeping up with web standards is reasonably well documented (http://nolanlawson.com/2015/06/30/safari-is-the-new-ie/ http://nolanlawson.com/2015/06/30/safari-is-the-new-ie/) (note: this article generated a fair amount of controversy when it was originally posted on HN) I've just tried this site in the very newest OSX Safari and it looks dreadful. Disappointing.

exodust 11y ago

I've been holding back jumping into this because of browser support. But I'm tired of waiting. Flexbox is easily the best most exciting layout mode in CSS, and I need to start using it for site builds. Responsive the way it was meant to be. I'll figure something out for iOS compatibility and other mobile browsers that fall short. The benefits and potential are too good. I don't know why anyone would continue clutching to clunky grid frameworks and the tired old "3 things we do" look when these new layout modes are catching on. So much design potential without the pain means more affordable interesting responsive sites. I just hope the browsers lagging behind in support get their act together (Safari).