
What the FlexBox? – A free 20 video course to learn CSS Flexbox - sebg
http://flexbox.io/#/
======
dang
[https://news.ycombinator.com/item?id=9963714](https://news.ycombinator.com/item?id=9963714)

------
vanderZwan
As someone who has little direct experience with this part of webdev (other
than aligning paragraphs once in a while for _really_ basic static text
sites), I have to wonder: is the fact that flexbox requires a _20-part video
course_ a sign of it being:

\- a broken mess,

\- a _less_ broken mess than what came before it,

\- an inevitable consequence of trying to solve an inherently difficult and
complicated problem?

\- some combination of the above?

Either way, nice of Wes Bos to provide such a tutorial, will have a look.

~~~
wesbos
Author here - it's just 20 videos broken apart into each topic so when you
need to come back to reference something, it's quick.

Is flexbox hard to learn? Yes, but it's because it's such a powerful layout
tool. There are tons of gripes about Flexbox, but I've found that if you just
put in a few hours to learn it, you are going to be way ahead in your CSS and
layout game.

We haven't had to learn anything hard in CSS for years and now it's time.
Hunker down and get at it!

~~~
Numberwang
If I learn this, is this all i need to use for CSS layout from now on?

Or is there more to learn?

~~~
wesbos
You'll still need floats to text and images, but this takes care of quite a
bit any float based layouts

------
alexduros
A good sum up to play with flexbox here : [https://css-
tricks.com/snippets/css/a-guide-to-flexbox/](https://css-
tricks.com/snippets/css/a-guide-to-flexbox/)

~~~
cloverich
Thats been my goto reference for most of my layout needs. I've also found
[https://philipwalton.github.io/solved-by-
flexbox/](https://philipwalton.github.io/solved-by-flexbox/) useful. Props to
all the great authors (including OP) for these -- flexbox + great tutorials
has greatly improved my web dev experience.

~~~
exodust
And don't forget [http://flexboxin5.com/](http://flexboxin5.com/)

(tip: visit with a computer not a phone)

------
projproj
I think flexbox is a great tool. I spent some time learning and using it, but
I found it hard to remember the names of the different properties. I created
[http://flexbox.help](http://flexbox.help) as an easy way to remember and
check their effects.

------
bobwaycott
I recognize the effort put into these videos, and admire it. A few videos in,
and the approach is pretty good—split flexbox into small chunks for those who
learn best that way.

Sadly, the frequent mispronunciation of words quickly becomes distracting.
Axis pronounced as "access", axes called "axises", i think I even heard "ek
cetera". By the third video, I think I heard these mistakes at least a dozen
times. That totally kills being able to listen. Perhaps it's worth redoing the
voice over. As it stands, I'd rather read a text guide.

------
tayodore
I found [https://cvan.io/flexboxin5/](https://cvan.io/flexboxin5/) immensely
useful when trying to get my head round flexBox.

~~~
yuribit
I prefer this one [http://flexboxfroggy.com/](http://flexboxfroggy.com/)

~~~
dizzy3gg
Web Page Blocked

Access to the web page you were trying to visit has been blocked in accordance
with company policy. Please contact your system administrator if you believe
this is in error.

URL: flexboxfroggy.com/

Category: malware-sites

~~~
lstamour
Compile it yourself if you prefer:
[https://github.com/thomaspark/flexboxfroggy](https://github.com/thomaspark/flexboxfroggy)

------
wnevets
Whats with the new login requirement?

~~~
nothis
You pay with your email information. Not that bad, actually.

------
krat0sprakhar
IMO, Flexbox is one of those skills that would solve more than half of my
frontend problems if I were good at it.

~~~
paulojreis
Not quite, I think.

I've been using it, it's cool and all, solves some common CSS issues, but it
comes with its own set of problems. For starters, it's a whole new set of
browser incompatibilities that you have to learn [1], some of them render
flexbox almost useless [2]. Additionally, IMHO, it's model is _leaky_ ; leaky
in the sense that the it relies on DOM structure - a `display: flex` element
will do it's thing by affecting the direct child elements. This means that a)
if your component is wrapped by another component, you'll have a hard time
predicting how it will be laid out/isolating the behavior; and b) if, by some
reason (e.g. using Angular directives) a wrapper is added between the
`display: flex` and the flex item elements, the layout will be lost.

[1]
[https://github.com/philipwalton/flexbugs](https://github.com/philipwalton/flexbugs)

[2]
[https://code.google.com/p/chromium/issues/detail?id=346275](https://code.google.com/p/chromium/issues/detail?id=346275)

------
afarrell
I have found [http://flexboxfroggy.com/](http://flexboxfroggy.com/) a good way
to learn some parts of flexbox, thought it can't really cover edge cases.

------
tm33
Wes it the man. Thanks for putting this together!

------
Someone1234
Even if you know Flexbox you cannot use Flexbox because support lacks.

[http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox)

The TL;DR: Everyone is doing well except IE which is horribly broken. Only
Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so
therefore Flexbox is still no-go.

Come back in five years when IE 11 is a distant memory and Edge is popular.

~~~
kozak
There's plenty of cases (especially in the enterprise, where requirements can
be tightly controlled) when non-Edge versions of IE can be safely dropped. I'm
working on such a project right now, we use flexbox very extensively.

~~~
SonicSoul
interesting. are you also supporting mobile devices? any issues with iOS or
Android to consider?

I am considering flexbox but have to worry about supporting above. Luckily we
don't have legacy IE to worry about so am hopeful.

according to this [0] ie 10 and 11 are supported but with "partial support"?

[0] [http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox)

~~~
lstamour
There's a list of bugs, test cases and workarounds here:
[https://github.com/philipwalton/flexbugs](https://github.com/philipwalton/flexbugs)

One bug used to affect non-IE browsers but should now be fixed in all but
Safari.

------
colmvp
Great stuff. Also, experienced web devs in Steeltown? Awesome to see!

~~~
wesbos
Holla! Lots of good devs in the hammer!

------
JonLim
Wes! This is awesome!

------
sebringj
They are probably showing how the various browsers' c++ works to render
flexbox in order to fit it into 20 videos?

------
kevando
@thisisrobv

------
orliesaurus
proof that css is still broken in 2016

~~~
deadowl
Well, I would say that vertically centering a thumbnail to the left of a block
of text would certainly be easier with flex box. My previous solution would
have been:

    
    
        .container { position: relative; }
        .thumbnail { position: absolute; margin: auto 0; width: w; height: h; margin: auto 0; top: 0; right: 0; bottom: 0; left: 0; }
        .summary { padding-left: w; min-height: h; }
    

With flexbox that becomes:

    
    
        .container { display: flex; }
        .thumbnail { align-self: center; }
    

There are a lot fewer traps and design is a lot more scalable in that you
don't have to worry per se about width and height.

