10 ms·

What the FlexBox? – A free 20 video course to learn CSS Flexbox

157 points by sebg 11y ago

vanderZwan 11y ago
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 11y ago
  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!
  - kylestlb 11y ago
    Thanks for putting up the effort to do this. For some of us, video tutorials w/ narration are much easier to absorb than one off blog posts!
  - Numberwang 11y ago
    If I learn this, is this all i need to use for CSS layout from now on? Or is there more to learn?
    - wesbos 11y ago
      You'll still need floats to text and images, but this takes care of quite a bit any float based layouts
- mbrock 11y ago
  You can't draw any such conclusions from the existence of a series of 20 short tutorial videos. I could make 20 videos about how to use ls.
- madeofpalk 11y ago
  > - an inevitable consequence of trying to solve an inherently difficult and complicated problem? Flexbox is actually relatively simple for the common use cases (absolute centering, distributing leftover space between elements etc). If you have more complicated layouts, there's a lot more to the Flexbox spec that will help you out.
- dahart 11y ago
  I cant speak to these videos, but most flexbox tutorials are quite long. The number of videos may be a sign of completeness. The core of flexbox, and the most powerful and commonly used parts, isn't that much material, and isn't very hard to learn. But there's a long tail of corner cases and tricks and special situations. There's one other reason too: flexbox is at it's most powerful and most simple, IMO, when you put flexboxes inside other flexboxes. But that inherently mixes markup and styling. Some of flexbox' features are designed to help you avoid mixing markup and styling, but that adds to the complexity. CSS is somewhere between inherently complicated and a broken mess. That's not the most charitable way to put it, but not entirely inaccurate either.
- weego 11y ago
  It's just a sign that a section front end people are obsessed with making trivial things seem complicated. I mean https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ literally just gives you what you need in a skim-readable page.
- toxican 11y ago
  It me took about 15 minutes of reading an article to get a basic understanding and start using some basic functionality. I'd imagine the 20 videos explore every crevice of Flexbox, which you don't necessarily need to start using it.
- jasonkostempski 11y ago
  Dynamic layout is a hard problem. I've never come across a layout engine that didn't require at least a day to get comfortable with. Some may have the advantage of being similar to something you've used before and might give you a head start but that can also slow you down when you assumed it's exactly like the other when it's not.
  - Animats 11y ago
    If you want to see a completely different approach to dynamic layout that makes more sense, check out the constraint system in the 2D sketch system of Autodesk Inventor. It's all visual, controlled through a GUI; you select two points or two lines or a point and line and apply constraints such as "coincident" or "perpendicular" or "parallel" or "tangent". You can also give things explicit dimensions, which may be computed from other dimensions. The GUI stops you if you try to insert incompatible constraints. You can put in text, too, so you can actually use it as a layout engine. There's no notion of "line break", though; it won't change the number of things in a row if you change the outer bounding width. This is much more comfortable for designers than trying to do it through a set of declarations with no consistency checking. A constraint engine really is the right tool for the job. It also maps well to a GUI, which CSS does not. The constraint system isn't limited to horizontal and vertical. You can have circles, arcs, and even splines. Graphic designers would love to have such capabilities in web design.
- vbezhenar 11y ago
  I don't know about Flexbox, but I never saw easy and powerful layout libraries. They can be easy, but with very basic capabilities (Delphi 7) or they can do almost anything, but with a lot of concepts and complex API (Java Swing, Java FX, Cocoa, Qt, HTML positioning in general). I guess, that efficient layouting is just not a simple problem.
- exodust 11y ago
  > is the fact that flexbox requires a 20-part video course It's not a fact. Nor is it a fact that to access videos on the web requires an email address! In both cases the author has chosen to do this for whatever reason.
  - giacomone 11y ago
    Looks like the author uploaded all videos on Youtube though: https://www.youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid https://www.youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAh...
- woah 11y ago
  I don't think that you should be in the habit of making technical decisions based on the number of videos or something. Take 1.5 minutes to read a web page on flex box and realize that it consists of putting boxes into boxes, deciding the alignment and how much space they will take up. I haven't watched the videos but it seems strange that there are 20 of them.
- elros 11y ago
  As someone who pushes pixels around every day for a living – among other things, of course – I'd say option 3. The thing about layout styles for CSS that people seem to miss is that you don't have to choose a single one one. You can mix floats in one area of the DOM with Flexbox in another area and Grids (once they're ready) in yet another area, and they'll work well – provided they're properly siloed – because they're mostly targeted at solving different issues, layout-wise.
- roneesh 11y ago
  Flexbox takes a few hours of work to learn, as others here have said. However, once you learn it, you have a logically sensible system of layout. It's worth the time. As far as it's quirks go, that's because it was slow to be standardized, so there is outdated info out there. If you start to learn the older tools to do page layout, you can learn each one a bit faster (float, positioning, display properties), but combined they do NOT form a consistent logical system of page layout. Your learning is just repetition to see what works, Googling of CSS tricks and then hopefully you develop some intuition about when to use which property to achieve your desired effect. This confusion is why Flexbox is a net positive comparatively. With flexbox you can know what elements will do when you apply a CSS property pretty assuredly (well, if not now, in the near future). Without, it's a bit more learn by error. Flexbox is a brighter future.
- arihant 11y ago
  It's the sign of having more videos of shorter length than having less videos of longer length. Most basic HTML courses are around 20-25 parts. That does not mean HTML is rocket science, or a broken mess.
- furyferret 11y ago
  It's just web developers who lived in a world where front-end layout was supposed to be hard and who distill complexity out of four or five trivial CSS properties to convince themselves that all of the hours they lost aligning divs with floats or bootstrap weren't pointless, and that the new way must be as complicated.
- kelvin0 11y ago
  Every time I finally resolve to start doing some Web Front-end stuff, I have the same reasoning as you put forth ... and I go back to coding my frontend in wxPython. I just don't know where to start, and nothing seems to last more than a few weeks until a shinier thing pops up... I need help!
tayodore 11y ago
I found https://cvan.io/flexboxin5/ https://cvan.io/flexboxin5/ immensely useful when trying to get my head round flexBox.
- yuribit 11y ago
  I prefer this one http://flexboxfroggy.com/ http://flexboxfroggy.com/
  - dizzy3gg 11y ago
    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 11y ago
      Compile it yourself if you prefer: https://github.com/thomaspark/flexboxfroggy https://github.com/thomaspark/flexboxfroggy
- roneesh 11y ago
  I really love this site, it's a great quick intro to Flexbox. Kudos to whoever is hosting it here now (from my understanding the original author stopped hosting it some time ago).
alexduros 11y ago
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 11y ago
  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 11y ago
    And don't forget http://flexboxin5.com/ http://flexboxin5.com/ (tip: visit with a computer not a phone)
krat0sprakhar 11y ago
IMO, Flexbox is one of those skills that would solve more than half of my frontend problems if I were good at it.
- paulojreis 11y ago
  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
JonLim 11y ago
Wes! This is awesome!
Someone1234 11y ago
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 11y ago
  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.
  - Someone1234 11y ago
    That's nice for you. For public web-sites it is still non-viable. Broken versions of IE make up too large of a % of users.
    - lstamour 11y ago
      Actually, if IE 10+ is the target for my site, I would totally use FlexBox. The list of workarounds is far shorter than CSS headaches used to be. Remember the terrible IE on Mac days? ;-)
  - SonicSoul 11y ago
    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 11y ago
      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 11y ago
Great stuff. Also, experienced web devs in Steeltown? Awesome to see!
- wesbos 11y ago
  Holla! Lots of good devs in the hammer!
wnevets 11y ago
Whats with the new login requirement?
- nothis 11y ago
  You pay with your email information. Not that bad, actually.
orliesaurus 11y ago
proof that css is still broken in 2016
- roneesh 11y ago
  As I said above in a post, in my opinion Flexbox is win, it's an attempt to create a logically consistent tool for layout, vs the comparative hackery of combining float/position/display/margin to achieve your desired layout. Is it perfect? I doubt that, but it's definitely a step towards CSS being less broken.
- deadowl 11y ago
  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.
projproj 11y ago
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.
afarrell 11y ago
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.
sebringj 11y ago
They are probably showing how the various browsers' c++ works to render flexbox in order to fit it into 20 videos?
tm33 11y ago
Wes it the man. Thanks for putting this together!
dang 11y ago
https://news.ycombinator.com/item?id=9963714 https://news.ycombinator.com/item?id=9963714
bobwaycott 11y ago
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.
kevando 11y ago
@thisisrobv

157 points by sebg 11y ago

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 11y ago
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!
- kylestlb 11y ago
  Thanks for putting up the effort to do this. For some of us, video tutorials w/ narration are much easier to absorb than one off blog posts!
- Numberwang 11y ago
  If I learn this, is this all i need to use for CSS layout from now on? Or is there more to learn?
  - wesbos 11y ago
    You'll still need floats to text and images, but this takes care of quite a bit any float based layouts
mbrock 11y ago
You can't draw any such conclusions from the existence of a series of 20 short tutorial videos. I could make 20 videos about how to use ls.
madeofpalk 11y ago
> - an inevitable consequence of trying to solve an inherently difficult and complicated problem? Flexbox is actually relatively simple for the common use cases (absolute centering, distributing leftover space between elements etc). If you have more complicated layouts, there's a lot more to the Flexbox spec that will help you out.
dahart 11y ago
I cant speak to these videos, but most flexbox tutorials are quite long. The number of videos may be a sign of completeness. The core of flexbox, and the most powerful and commonly used parts, isn't that much material, and isn't very hard to learn. But there's a long tail of corner cases and tricks and special situations. There's one other reason too: flexbox is at it's most powerful and most simple, IMO, when you put flexboxes inside other flexboxes. But that inherently mixes markup and styling. Some of flexbox' features are designed to help you avoid mixing markup and styling, but that adds to the complexity. CSS is somewhere between inherently complicated and a broken mess. That's not the most charitable way to put it, but not entirely inaccurate either.
weego 11y ago
It's just a sign that a section front end people are obsessed with making trivial things seem complicated. I mean https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ literally just gives you what you need in a skim-readable page.
toxican 11y ago
It me took about 15 minutes of reading an article to get a basic understanding and start using some basic functionality. I'd imagine the 20 videos explore every crevice of Flexbox, which you don't necessarily need to start using it.
jasonkostempski 11y ago
Dynamic layout is a hard problem. I've never come across a layout engine that didn't require at least a day to get comfortable with. Some may have the advantage of being similar to something you've used before and might give you a head start but that can also slow you down when you assumed it's exactly like the other when it's not.
- Animats 11y ago
  If you want to see a completely different approach to dynamic layout that makes more sense, check out the constraint system in the 2D sketch system of Autodesk Inventor. It's all visual, controlled through a GUI; you select two points or two lines or a point and line and apply constraints such as "coincident" or "perpendicular" or "parallel" or "tangent". You can also give things explicit dimensions, which may be computed from other dimensions. The GUI stops you if you try to insert incompatible constraints. You can put in text, too, so you can actually use it as a layout engine. There's no notion of "line break", though; it won't change the number of things in a row if you change the outer bounding width. This is much more comfortable for designers than trying to do it through a set of declarations with no consistency checking. A constraint engine really is the right tool for the job. It also maps well to a GUI, which CSS does not. The constraint system isn't limited to horizontal and vertical. You can have circles, arcs, and even splines. Graphic designers would love to have such capabilities in web design.
vbezhenar 11y ago
I don't know about Flexbox, but I never saw easy and powerful layout libraries. They can be easy, but with very basic capabilities (Delphi 7) or they can do almost anything, but with a lot of concepts and complex API (Java Swing, Java FX, Cocoa, Qt, HTML positioning in general). I guess, that efficient layouting is just not a simple problem.
exodust 11y ago
> is the fact that flexbox requires a 20-part video course It's not a fact. Nor is it a fact that to access videos on the web requires an email address! In both cases the author has chosen to do this for whatever reason.
- giacomone 11y ago
  Looks like the author uploaded all videos on Youtube though: https://www.youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid https://www.youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAh...
woah 11y ago
I don't think that you should be in the habit of making technical decisions based on the number of videos or something. Take 1.5 minutes to read a web page on flex box and realize that it consists of putting boxes into boxes, deciding the alignment and how much space they will take up. I haven't watched the videos but it seems strange that there are 20 of them.
elros 11y ago
As someone who pushes pixels around every day for a living – among other things, of course – I'd say option 3. The thing about layout styles for CSS that people seem to miss is that you don't have to choose a single one one. You can mix floats in one area of the DOM with Flexbox in another area and Grids (once they're ready) in yet another area, and they'll work well – provided they're properly siloed – because they're mostly targeted at solving different issues, layout-wise.
roneesh 11y ago
Flexbox takes a few hours of work to learn, as others here have said. However, once you learn it, you have a logically sensible system of layout. It's worth the time. As far as it's quirks go, that's because it was slow to be standardized, so there is outdated info out there. If you start to learn the older tools to do page layout, you can learn each one a bit faster (float, positioning, display properties), but combined they do NOT form a consistent logical system of page layout. Your learning is just repetition to see what works, Googling of CSS tricks and then hopefully you develop some intuition about when to use which property to achieve your desired effect. This confusion is why Flexbox is a net positive comparatively. With flexbox you can know what elements will do when you apply a CSS property pretty assuredly (well, if not now, in the near future). Without, it's a bit more learn by error. Flexbox is a brighter future.
arihant 11y ago
It's the sign of having more videos of shorter length than having less videos of longer length. Most basic HTML courses are around 20-25 parts. That does not mean HTML is rocket science, or a broken mess.
furyferret 11y ago
It's just web developers who lived in a world where front-end layout was supposed to be hard and who distill complexity out of four or five trivial CSS properties to convince themselves that all of the hours they lost aligning divs with floats or bootstrap weren't pointless, and that the new way must be as complicated.
kelvin0 11y ago
Every time I finally resolve to start doing some Web Front-end stuff, I have the same reasoning as you put forth ... and I go back to coding my frontend in wxPython. I just don't know where to start, and nothing seems to last more than a few weeks until a shinier thing pops up... I need help!

tayodore 11y ago

I found https://cvan.io/flexboxin5/ https://cvan.io/flexboxin5/ immensely useful when trying to get my head round flexBox.

yuribit 11y ago
I prefer this one http://flexboxfroggy.com/ http://flexboxfroggy.com/
- dizzy3gg 11y ago
  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 11y ago
    Compile it yourself if you prefer: https://github.com/thomaspark/flexboxfroggy https://github.com/thomaspark/flexboxfroggy
roneesh 11y ago
I really love this site, it's a great quick intro to Flexbox. Kudos to whoever is hosting it here now (from my understanding the original author stopped hosting it some time ago).

alexduros 11y ago

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 11y ago
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 11y ago
  And don't forget http://flexboxin5.com/ http://flexboxin5.com/ (tip: visit with a computer not a phone)

krat0sprakhar 11y ago

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

paulojreis 11y ago
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

JonLim 11y ago

Wes! This is awesome!

Someone1234 11y ago

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 11y ago
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.
- Someone1234 11y ago
  That's nice for you. For public web-sites it is still non-viable. Broken versions of IE make up too large of a % of users.
  - lstamour 11y ago
    Actually, if IE 10+ is the target for my site, I would totally use FlexBox. The list of workarounds is far shorter than CSS headaches used to be. Remember the terrible IE on Mac days? ;-)
- SonicSoul 11y ago
  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 11y ago
    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 11y ago

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

wesbos 11y ago
Holla! Lots of good devs in the hammer!

wnevets 11y ago

Whats with the new login requirement?

nothis 11y ago
You pay with your email information. Not that bad, actually.

orliesaurus 11y ago

proof that css is still broken in 2016

roneesh 11y ago
As I said above in a post, in my opinion Flexbox is win, it's an attempt to create a logically consistent tool for layout, vs the comparative hackery of combining float/position/display/margin to achieve your desired layout. Is it perfect? I doubt that, but it's definitely a step towards CSS being less broken.
deadowl 11y ago
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.

projproj 11y ago

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.

afarrell 11y ago

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.

sebringj 11y ago

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

tm33 11y ago

Wes it the man. Thanks for putting this together!

dang 11y ago

https://news.ycombinator.com/item?id=9963714 https://news.ycombinator.com/item?id=9963714

bobwaycott 11y ago

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.

kevando 11y ago

@thisisrobv