Flexbox in 5 minutes
flexboxin5.com
flexboxin5.com
* (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
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.)
It would be great for there to be a sort of CSS linter that could help here, but I haven't found one yet.
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.
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?
Here's how the site looks for me in Safari 8.0.8: http://imgur.com/aYwYTDx
Safari seems to refuse reading flex style: http://imgur.com/LEhtYBZ
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.
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.
(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?
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.
CSS-Tricks has a pretty handy guide, too. If I need a quick reference when developing, that and MDN are my go to.
This paired with https://css-tricks.com/snippets/css/a-guide-to-flexbox/ makes up really good tools for learning and quick ref for flexbox.
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).
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.
I've just tried this site in the very newest OSX Safari and it looks dreadful. Disappointing.
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)
Where?
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.