
Flexbox in 5 minutes - spking
http://flexboxin5.com/
======
namuol
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
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.)

~~~
andrewgleave
Safari 9.0 and WebKit builds seem to show conformance in my limited testing.

~~~
veidr
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.

------
nfriedly
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
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

------
Tomte
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?

~~~
azernik
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)

------
wesbos
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
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)

------
blintzing
[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
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/)

------
srameshr
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
For explanations of older browsers implementation, there's this as well.

[https://css-tricks.com/using-flexbox/](https://css-tricks.com/using-flexbox/)

------
exodust
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).

------
at-fates-hands
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
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.

------
paublyrne
Previously discussed:
[https://news.ycombinator.com/item?id=9137515](https://news.ycombinator.com/item?id=9137515)

------
hardwaresofton
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
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.

------
Kiro
> ...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?

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

------
JDiculous
This is a repost from like 6 months ago.

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

------
boxcardavin
Advantage over Bootstrap in 5 seconds?

~~~
azernik
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.

------
ben_bai
Does not render right on my mobile.

~~~
ben_bai
Does not render right in Firefox 40.0.3, too. Tried different Window sizes,
some blow up the Layout

~~~
talmand
I think it's more likely it doesn't render correctly in your Firefox.

