* (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.
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.)
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.
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.
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.
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 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?
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.
That's because flexbox is still prefixed in Safari 8 (see 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".
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.
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
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.
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).
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].
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).
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.
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/) (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.
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)
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.
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.
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.
* (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