
Flexbox in 5 minutes - robin_reala
http://flexboxin5.com/
======
rburhum
I remember fantasai working really hard looking at her computer a few years
ago (in a coworking space at SF). I asked her what she was working on - and
she replied "working on css". I thought she was a front-end dev.

6 months later I realized she was working literally on the css flexbox spec,
not writing css for a site!

Glad this flexbox stuff is picking up. people like her put an insane amount of
time and effort to make it come out this way.

~~~
kchoudhu
I went to school with a girl who went by fantasai online and did web-ish stuff
-- you wouldn't be talking about someone called Elika, would you?

~~~
grandalf
Probably is:

[http://lists.w3.org/Archives/Public/public-css-
commits/2011A...](http://lists.w3.org/Archives/Public/public-css-
commits/2011Aug/0105.html)

~~~
kchoudhu
Well I'll be. Some people have _clearly_ done more with their lives since
graduation than others :)

------
mmastrac
I rebuilt my personal site on Flexbox in December last year after making the
call that it was widely supported enough [1]. There were a few hiccups:

1\. _Safari 's requirement to use the webkit- prefix is a pain._ Thankfully
there are SASS libraries that work around that [2], but you aren't using
Flexbox directly.

2\. _Google 's pagespeed tools doesn't support it._ It's an ancient version of
Webkit -- your mobile score will suffer. If that matters to you, you'll have
to do some hacking to ensure that it doesn't affect things on the mobile side.

[1] for a personal site.

[2] [https://github.com/philipwalton/solved-by-
flexbox](https://github.com/philipwalton/solved-by-flexbox)

~~~
bonn1
re 2.: sure? And did you try it with the new Google Mobile Freindly Test too?

~~~
mmastrac
Definitely sure. It supported it just marginally enough to mangle it in a way
that you couldn't work around. My fix was to literally check if the floating
sidebar overlapped the content and, if so, add a css class to the body that I
could use to fix the pagespeed insights browser.

I'll give the Mobile Friendly Test a shot with and without the hack.

Edit: Yup, still busted. And the new test is broken as well (probably using
the same backend). This is what it looks like:
[http://imgur.com/fBIP80y](http://imgur.com/fBIP80y)

~~~
Throwaway90283
I run a popular site that heavily uses flexboxes, with dozens of flex
containers on every page, different alignments, etc. I just checked pagespeed
insights, and the site renders fine in the little mobile phone preview from
your image, so it's definitely supported. Check your code, it might be
incorrect, you might need webkit prefixes, or you might be using outdated
flexbox specs that have been dropped.

------
Igglyboo
Amazing, I had always heard flexbox being touted as the "next big thing" but
it had come across as confusing and obscure. This was a great tutorial and I
will definitely be using flexbox in the future.

It seems to almost eliminate the need for a grid system a la bootstrap, which
is great because I know a lot of people that use bootstrap specifically for
the grid system and throw out/re implement all of the other parts.

~~~
Alex3917
For what it's worth, the tradition wisdom is that flexbox is meant for widgets
(e.g. the social icons in your sidebar), not for the main layout of your
content.

~~~
krebby
No way. It's great for layouts too, particularly the ever-difficult
fluid-3-column-on-desktop-to-one-column-on-mobile "holy grail" layout [0].

That site has a few other great examples like media objects that would usually
take a ton of CSS hacking but are solved easily with flexbox [1].

[0] [http://philipwalton.github.io/solved-by-
flexbox/demos/holy-g...](http://philipwalton.github.io/solved-by-
flexbox/demos/holy-grail/) [1] [http://philipwalton.github.io/solved-by-
flexbox/](http://philipwalton.github.io/solved-by-flexbox/)

------
teraflop
So, based on a little experimentation, it seems like "align-items" and "align-
content" behave identically, except that "align-items" is only used when there
is one row of boxes and "align-content" is only used when there are multiple
rows.

I find it hard to imagine a case where I'd want the alignment to suddenly
change based on how my elements happened to be wrapped. Is there ever a
situation where this _wouldn 't_ be confusing? And if not, why do these two
separate properties exist?

(Also, I like this tutorial but there are some race conditions in the
implementation. Clicking the "next slide" arrow too fast just replays the
fade-in animation instead of advancing the slide. And on slide 30, if you
click the "make a menu" link at the wrong time you can end up with the
"flexbox in 5 minutes" intro text displayed on top of the boxes.)

~~~
masklinn
> So, based on a little experimentation, it seems like "align-items" and
> "align-content" behave identically, except that "align-items" is only used
> when there is one row of boxes and "align-content" is only used when there
> are multiple rows.

> why do these two separate properties exist?

Because they don't behave identically: [https://css-
tricks.com/snippets/css/a-guide-to-flexbox/](https://css-
tricks.com/snippets/css/a-guide-to-flexbox/)

~~~
gknoy
Thank you for the explanation. The guide just said "Play with them ...", so it
was not obvious (at least to me teraflop) what was different about them.

------
deltaprotocol
This is _awesome_ , but the chosen title is misleading. This requires at least
20 minutes.

~~~
_devbryce
TBH, I chose the title more for the alliteration :)

~~~
pimlottc
"Flexbox in 5 4-minute fractions"

------
pestaa
According to
[http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox) it is
already widely deployed.

Why did I wait?

~~~
itsbits
no proper supprt in IE10..

is there any hope that Microsoft will make their new Browser evergreen???

~~~
Bahamut
We use flexbox and support IE10 with it at my company. In practice, Safari 7
has been far more of a pain with it than IE10.

~~~
grandalf
I just tested flexboxin5 site on IE10 and it seemed quite broken. Can you
describe how you make IE10 work with flexbox without tons of work?

------
domrdy
I've read that facebook implemented flexbox-like layouting in javascript to
use with react native. I wonder how much the two implementations differ.

[https://www.youtube.com/watch?v=7rDsRXj9-cU&t=996](https://www.youtube.com/watch?v=7rDsRXj9-cU&t=996)

~~~
nojvek
Not much. Facebook used a very thorough testing method where it tests millions
of permutations of flexbox variables and compares the output with the browser.

------
_devbryce
Author/Creator of FlexboxIn5 here:

I'm glad to see this thread, because there seem to be some bugs I need to
address.

Any other features you guys would find helpful? Feel free to tell me here or
on twitter: @_devbryce

~~~
huckyaus
Step 32 has me scratching my head. I've set the suggested property values, but
all of the elements still shrink at a uniform rate when I click resize box.

Am I missing something, or is there an error/omission in the instructions?

~~~
ntucker
Me too. And on 34, "You'll see that when the item reaches its flex basis, it
stops flexing and something else has to flex" doesn't actually seem to be
true. Can't tell if there's a bug or if it's something I've done wrong.

------
nimbix
So how does flexbox compare to the tools we were using in the late 90s/early
00s? Is layout finally as simple again as it was when it was still OK to use
tables and a transparent spacer.gif for everything?

~~~
Excavator
You can use display: table; and its siblings.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/display](https://developer.mozilla.org/en-
US/docs/Web/CSS/display)

------
pi-rat
Doesn't work properly in safari, seems to be missing the -webkit prefixes
(still..) required by safari. :/

~~~
robin_reala
Not that this helps the demo, but for your own apps autoprefixer does a good
job of polyfilling in the previous versions of flexbox that are still hanging
around (assuming you’ve got a build chain):
[https://github.com/postcss/autoprefixer](https://github.com/postcss/autoprefixer)

~~~
freshyill
I'm working on a major redesign right now and working heavily with Flexbox.
Between all the prefixes and the display: table fallbacks I'm using for old
IE, there's a _lot_ to manage.

Autoprefixer's value really becomes obvious when dealing with Flexbox. Flexbox
is unique because it's not just vendor prefixes, but two previous specs that
you need to manage. I really couldn't build a large site without it.

------
xiaq
I find myself very confused after getting to the align-items and align-content
part. For those of us who prefer a more formal introduction, the guide on MDN
seems pretty well written: [https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Flexi...](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Flexible_boxes)

------
brianzelip
This is a well executed tutorial. Bug: slide 32/53 reads

> [...] and click "resize flexbox".

The actual link reads "resize box", not "flexbox" \--- I've been thoroughly
enjoying working flexbox into frontend design. It really is what we've been
missing. Slap autoprefixer into the flow and you have little to worry about if
only targeting modern browsers.

The single-class oriented css toolkit Basscss.com has a flex-object module [1]
that I've been getting miles out of lately. While it doesn't provide single
classes for all flexible options, it's a good start and it's easy to add your
own styles into the mix. Plus the documentation site itself is a great example
of using flex. The Basscss author sort of operationalized Philip Walton's
solved by flexbox stuff.

[1] [http://www.basscss.com/docs/layout/#flex-
object](http://www.basscss.com/docs/layout/#flex-object)

~~~
creezy
I noticed the bug too. Wondering if the author meant to have us type something
else in instead? Anyone have a fix for this from the user side, or is this
just a problem with the program?

Thanks

------
didgeoridoo
Great method of explaining flexbox — most non-interactive explanations end up
looking like Mondrians (and convey approximately the same information).
Unfortunately, this demo melts down in Safari, which still requires prefixing.

~~~
masklinn
For some reason, it does have the very annoying behavior of resetting element
height when altering align-items.

~~~
dceddia
Yes, I ran into this bug as well.

Another small bug, slide 13: "...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."

The container styling options are in the middle-right of the page, at least on
my desktop browser.

------
z1mm32m4n
What frameworks are making good strides in adopting flexbox for their grid
systems?

------
contradictioned
If you made this site: You've got some console.log()s in there :)

Anyways so great to see this in action. I mean, one could also try this
manually, but this is really nice.

PS:
[http://flexboxin5.com/scss/vendors/_animate.scss](http://flexboxin5.com/scss/vendors/_animate.scss)
Failed to load resource: the server responded with a status of 404 (Not Found)
main.js:1117 1

------
untog
The first few times I tried to grapple with flexbox I just didn't get it -
there were two competing specs, it was messy... now, it's fantastic. I've been
using it on mobile projects and it's an absolute godsend to deal with
different screen sizes efficiently.

------
jasongrout
This is a nice demo. The blurb about flex-basis should be corrected, though.
It says on page 33 that flex-basis basically is a min-width for flex items,
but instead flex-basis sets the default (main) size, not the minimum size.

------
huskyr
Another Flexbox resource that i use almost daily is this one:

[http://jonibologna.com/flexbox-cheatsheet/](http://jonibologna.com/flexbox-
cheatsheet/)

Too bad Flexbox doesn't work in IE9 :(

~~~
ryanSrich
Out of curiosity, are you building a product that needs IE9 support? What
industry?

~~~
Loque
I can think of lots of products/sites that could benefit from having IE9
support. E-commerce for instance, public services... anything that needs to
have a far reach.

Still, quite a few options for what you can do without flexbox support (
polyfill / adjust design)

------
ggvvnn
Flexbox + Autoprefixer = Win

------
serve_yay
This seems so well-intentioned! But I think maybe it doesn't always do what it
is supposed to do. (It's hard to say -- I'm not quite sure what it is supposed
to do!)

------
davedx
"Amazing! What used to require an entire suite of floats, media queries, and
outright hacks, is acheived by adding one property to a container div!"

...or you can just set display: inline-block on the child elements... [1]

[1] [http://jsfiddle.net/18fjgc0w/](http://jsfiddle.net/18fjgc0w/)

~~~
treerock
Tried inline block a few times but find the spacing on inline elements (and
the various workarounds[1]) a bit awkward and unpredictable.

[1] [https://css-tricks.com/fighting-the-space-between-inline-
blo...](https://css-tricks.com/fighting-the-space-between-inline-block-
elements/)

------
supercoder
An article explaining CSS that seems to have completely broken CSS.

------
charleyramm
Mostly broken on Safari

~~~
_devbryce
Sorry about that. When I first built this (many moons ago) it was unreasonably
difficult to get it working in Safari. Sounds like it's time to revisit that
issue.

