
Show HN: Flexbox.io – a free video series on learning CSS Flexbox - wesbos
http://flexbox.io/
======
scotchio
Awesome stuff.

I can't wait for Flexbox wide-spread adoption - especially in popular
frameworks. It's too bad so many people are forced to not be able to use it
because of IE9's total lack of support [1]. TBH, I'm not even sure if there's
a good polyfill for it.

Dimitar Stojanov (@justd100) wrote a super kick-ass write-up on scotch.io
covering basically everything there is on Flexbox [2]. It's probably much
quicker than 20 videos, has an amazing interactive demo, been shared over 2.4k
times, and is probably the best write-up on Flexbox I've read (I'm obviously
biased though).

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

[2] [https://scotch.io/tutorials/a-visual-guide-to-
css3-flexbox-p...](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-
properties)

~~~
bowlingx
I recently open-sourced a pattern-library/framework that uses mainly FlexBox
to arrange/layout items:
[http://bowlingx.github.io/flexcss/](http://bowlingx.github.io/flexcss/).
FlexBox for me was especially useful for big forms while using less markup.

~~~
graup
Thanks for releasing this! Very helpful, and the code is a pleasure to read.

~~~
bowlingx
thanks :) you're welcome, I will extend FlexCss in the next month and add more
documentation!

------
throwaway125
I really do appreciate the effort you put into these videos, and I definitely
understand you want something out of this as well but the user experience of
having to go through your site instead of a link to a youtube playlist does
put me off quite a bit.

Either way, the first few videos I've watched so far are great, thanks.

~~~
Stormcaller
I'm not sure how much views get lost, but I wonder is it worth it? There is a
short video as introduction which doesn't tell much, I'd much prefer a random
video from the series.

Now by making these private, no one will find this from youtube, other sites
won't link it and there is no playlist so I will have to click each url every
5 minutes or so, which is not the end of the world, but not fun.

He could have asked for my email for the project files(videos and project
files get sent to your email currently as I understand it), and gave videos
for free. Anyone actually interested in this would definitely give their email
for the files. If he wants my email to teach me something else later -- or
sell me something, I think someone who entered their mail while watching the
series will be more interested in what he could use the emails for, and now he
won't be able to reach these kinds of people from random views, in exchange
for the initial email count.

I don't think this is a nice deal, but I have no data, so just an opinion.
Maybe something to consider.

~~~
wesbos
Valid points but having an email is much better to stay in touch in the
future. If you don't like that - use mailinator- totally understandable

I'll publish the playlist in a week but for now I'm doing it only on the site.

------
jimmcslim
Are there any examples around of combining Bootstrap and Flexbox; i.e. relying
on Flexbox for layout and NOT using Bootstrap's grid, but using Bootstrap's
other components... is that practical without a significant rewrite of
Bootstrap (i.e. do the component styles make lots of assumptions about being
sited within the Bootstrap grid).

~~~
jonah
I added flexbox in certain areas of a bootstrap site to cleanly show varying
size thumbnails in a grid. (Probably uglier than necessary.)

    
    
      .row-flex {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap;
        align-content: flex-start;
        -ms-flex: 0;
        flex: 0;
      }
    
      <div class="row row-flex">
        <div class="col-md-2"></div>
        ...
      </div>

------
intrasight
Flexbox makes web development bearable. I use it for all my new work. Telling
clients they must have IE11, Chrome, or Firefox ceased to be an issue many
moons ago. It means you can also drop bloated frameworks like Bootstrap (and
JQuery for that matter).

------
trymas
Why he did not give a simple link to youtube playlist?

Why I need to give him my email? Spam? Ads? Gonna sell them? If not, then it's
only an inconvenience for him and for us.

------
javaru
20 seems like too many....

~~~
vcarl
It really does. The most helpful resource I found for Flexbox is a cheatsheet
from css-tricks.com.

[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-
tricks.com/snippets/css/a-guide-to-flexbox/)

~~~
ataylor32
That was helpful for me too. I also found Flexy Boxes to be useful:
[http://the-echoplex.net/flexyboxes/](http://the-echoplex.net/flexyboxes/)

~~~
bshimmin
This one from Philip Walton is quite handy too:
[https://philipwalton.github.io/solved-by-
flexbox/](https://philipwalton.github.io/solved-by-flexbox/) (The six examples
in the showcase are all very common problems, and well-solved with Flexbox.)

------
irln
Constructive criticism. You don't mention in the video what a flexbox is :)

Granted, googling flexbox is easy but I'd add a quick blurb in 10-20 seconds
telling those who don't know me<\--- what they are first.

BTW: I will definitely check out the videos!

------
amwelles
This is great! Ever since our company quit supporting IE9, I've had the joy of
working with flexbox. What once took 10-20 lines of Sass hackery now takes
only a few, and the code makes sense.

------
mattdotc
Hey, I'm unable to sign up using an email in the form of:
username+filter@gmail.com

I get a message after submitting saying check your inbox, but I haven't
received any messages (checked All mail and Spam folders).

Is this an intentional decision or shortcoming based on some email service?

~~~
wesbos
Not intentional at all - most sign ups do this.

Most are getting the email but I am getting hammered.

Shoot me an email? wesbos@gmail.com

~~~
mattdotc
Hey, just saw your response a few minutes ago, and shortly thereafter I
received a message from your service.

Thanks!!

------
amarraja
Things have changed since I was doing frontend dev (<table>), and I want to
brush up on modern CSS techniques. Could someone answer the following for me?

1\. Is flexbox the way to go (i.e. the new standard?)

2\. Is there a css primer to help with all this? I tried centering a div with
CSS once, it didn't end well!

~~~
madawan
it looks like it'll become the next standard yes. but support isn't there yet.

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

[http://howtocenterincss.com/](http://howtocenterincss.com/)

~~~
graup
93.99% is more than "support isn't there yet", in my opinion. Enough for many
projects at least. Obviously if you develop sites with a big IE8/9 audience
you should think twice.

------
meesterdude
I learned flexboxes from flexboxin5.com and use it wherever I can now. I love
it! my only gripe is safari needing the vendor prefixes. I don't know what IE
does - but i only care about real browsers anyway.

------
styx31
Simple suggestion: add subtitles. For non-native viewers it is a really nice
addition.

------
kuyfiuyg
Is there a way to see these videos without getting spam?

------
ganessh
I have subscribed with my email address but got no link to the videos as
described in the site. Am I the only one?

------
curiousjorge
bookmarked, will be going through these tutorial, especially since CSS has
never been a strong point for me as I've always focused on the backend. It
always filled me with envy when people seem to have the entire CSS memorized
and can create sexy UI out of thin air.

now is flexbox supported widely or is this still ongoing thing?

~~~
wesbos
The only gotcha is IE9 - but most people are either on IE8 or IE11 - so not
really an issue anymore. In 6 months to a year, support will be wide spread -
so now it's time to start learning!

That and React Native is using Flexbox to layout their apps too!

------
okonomiyaki3000
Thanks but no thanks to any and all instructional videos.

~~~
megalodon
Especially when there are pages like this: [https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Flexi...](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Flexible_boxes)

------
sktrdie
They should rename it to "a simple 20 video course on how to slow your
computer down to a halt" /irony

