8 ms·
Show HN: Flexbox.io – a free video series on learning CSS Flexbox
- curiousjorge 11y agobookmarked, 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 11y agoThe 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!
- javaru 11y ago20 seems like too many....
- wesbos 11y agoThey are short videos - you can watch them all or just reference the specific thing you need clarity on!
- vcarl 11y agoIt 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 11y agoThat was helpful for me too. I also found Flexy Boxes to be useful: http://the-echoplex.net/flexyboxes/ http://the-echoplex.net/flexyboxes/
- bshimmin 11y agoThis 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.)
- akilism 11y agoyeah this is my go to when I can't remember some little part of the flex box spec.
- chbrown 11y agoMaybe they are really short. 30 seconds * 20 => 10 minutes, which seems reasonable.
- dougmccune 11y agoI was curious as well so took a look at the durations. This is over 2.5 hours of content. About a layout system. I have to agree with another commenter, either this is far too much content or what should be a pretty simple layout system is insanely complicated.
- zecho 11y agoIf you're unwilling to spend two and a half hours learning flexbox, you're asking for a bad time with CSS in general. The flexbox spec alone is about 18,000 words long, which is about an hour and a half reading time for most people, to say nothing of comprehension or grasping the nuanced details. One could spend a lifetime learning the geometries of grid systems, so 2.5 hours seems pretty reasonable to me.
- megalodon 11y agoExcept you haven't learned much after watching those two and a half hours. I would argue reading this [1] or this [2], while simultaneously mocking up a flexbox grid will give you at least the same amount of knowledge in much less time. [1] https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi... [2] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- lucaspottersky 11y agoSo now I'm wondering: is it too much or did "the web" fail yet again to deliver a simple CSS/layout solution?
- Alex3917 11y agoFor what it's worth, I watched the first of these a couple years ago when they first came out, and I've been waiting for the rest ever since. None of the one-page flexbox tutorials on the web really do the technology justice.
- scotchio 11y agoAwesome 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-properties https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-p...
- deleted 11y ago[deleted]
- AndrewDucker 11y agoThankfully, as of January only Vista users will still be on IE9 (well, in a supported manner).
- nightski 11y agoI love consulting for enterprises due to the stability and large amounts of data but I still run into a lot of IE7/IE8. It is depressing.
- dspillett 11y agoAs of now, and most likely the next couple of years, I'm stuck needing to support IE8 as as first class citizen in my designs at my day job, unfortunately. We have put our foot down about the remaining IE6 installs one of our clients (a large bank) apparently has though, so that much is good... In personal projects I can afford to be more fussy and only support recent browsers, but in the day job these things are beyond my control even if they seem to be beyond good reason. Of course flexbox is for the most part a display issue - as long as your layout changing in an older browser that doesn't support it doesn't break your application (by stopping features being accessible or by making it ugly enough to fail UAT) you can still use it (with care) even if needing to support legacy user agents.
- amwelles 11y agoThis 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.
- throwaway125 11y agoI 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.
- Ninn 11y agoSeconded, i entered two mails now and still havn't gotten a link.
- petercooper 11y agoI'm a big fan of Wes' and don't want to mess up what he's doing, but as a clue.. the URLs for the preview graphics of each video contain each video's YouTube ID :)
- Stormcaller 11y agoI'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 11y agoValid 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.
- irln 11y agoConstructive 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!
- ganessh 11y agoI have subscribed with my email address but got no link to the videos as described in the site. Am I the only one?
- sktrdie 11y agoThey should rename it to "a simple 20 video course on how to slow your computer down to a halt" /irony
- okonomiyaki3000 11y agoThanks but no thanks to any and all instructional videos.
- megalodon 11y agoEspecially when there are pages like this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...
- jimmcslim 11y agoAre 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 11y agoI 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>
- mattdotc 11y agoHey, 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?
- intrasight 11y agoFlexbox 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).
- amarraja 11y agoThings 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!
- jacobolus 11y ago1) Yes. 2) This is a pretty nice short intro http://flexboxin5.com http://flexboxin5.com or for a fuller treatment check MDN, as for any other web technology. There are a bunch of other sources linked from this discussion thread if you scroll down a bit.
- amarraja 11y agoThanks! So it will be enough to learn just flexbox without any "legacy" css? (Assume I won't be maintaining / porting any old code)
- DiThi 11y agoI think everything related to layout can be made with flexbox (e.g. you can avoid doing ugly tricks with tables, blocks, floats, calc(), calculating percentages, etc), but you still need the usual style for text, size of images, borders, backgrounds... Essentially, it avoids the "I FSCKING HATE CSS" parts.
- jacobolus 11y agoErm.. flexbox is just one part of CSS, useful for a particular subset of layout tasks. CSS has many other parts you need to learn if you want to style web pages.
- amarraja 11y agoAah I see. You can tell my frontend knowledge is dire! I'll start on the basics first
- 11y ago
- trymas 11y agoWhy 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.
- kuyfiuyg 11y agoIs there a way to see these videos without getting spam?
- styx31 11y agoSimple suggestion: add subtitles. For non-native viewers it is a really nice addition.
- meesterdude 11y agoI 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.