CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)

Code Examples —

---

DevTips is a YouTube show about web design and development.

"HTML5 Basics" Playlist:

"CSS Basics" Playlist:

"How to build a professional website from start to finish" Playlist:

----

Follow the DevTips GitHub Page to get all the codez:

DevTips now has a twitter account:

Travis also tweets:

[BHFJohnny]

Alright, I'm going through the responsive desing from scratch playtist and I'm quite happy with it. Building my own site with jekyll, not step by step the same, but just following general rules. Getting stuck with positioning, auto margining, floating and whatever. Noticed you used +display(flex) bournon mixin, not paying too much attention.

Today, I woke up, took my phone and just youtube searched css flexbox. Discovered this.

I had to pause the video and just breathe it out. I can't describe the feeling. Flexbox is just so great. I haven't been fan of grid systems because I quite never knew how it worked and was so lazy to go trough the css. But now I can write my own and know exactly how it works. I'm one hundred per cent positive that flexbox will save not hours, but days of my life.

Thank you, Travis, for showing us. I really appreciate that.

[scottharrington]

Dude, every time I go looking for a solid tutorial you just keep popping up! Your approach is great!  Thank you!!

[coreymorrison]

I can't wait to re-watch this once I have the slightest idea what I'm doing. Great video. You're an inspiration.

[devarsh]

I never understood CSS, as a developer I find it very complicated, but flexbox are a blessing, and your video makes it so much more clear :D

[ainulyaqin]

BEST.TUTORIAL.VIDEO.EVER!
Thanks man, so helpful. I'm curently strugling with CSS layouting. Getting frustated with native positioning. But this save me a lot. Definitely gonna subscribe!

[TravisHi_YT]

Thanks for the vid! It's great to be able to have the codepen example to tinker with while watching the ep. Can open the example up, try to predict what code does what on the example, then watch your vid, it's great! Keep up the great work!

[aniket-kulkarni]

Oh My God!!! Oh My God!!!

This is the greatest CSS video that I have ever seen.

And I liked it because its awesome just like you.

[AndresOrjuelaTheSpecial]

I am very excited to have learned about FlexBox from you! Thank you! I have an old mac with OSX 10.6.8 so there are some tools I can't install because of compatibility... =( ... like Codepen. I did find Brackets and am working with that for now. I really appreciate how you took a second to explain that you were using autoprefixer and showed us the result, as that is what I had to copy into my css. Because I still don't have an option to use Jade (though there is a plugin for Brackets, but I've had no luck getting it to work yet) it would be great if when you are done with the html in jade you would just quickly show the resulting html so that we could see it and make sure where following along correctly. Just a suggestion for those who don't have all the great tools you're working with yet. Your rock, keep up the great work!

[ZacharyBeers]

YAY thank you for linking your music channel! 

[AJapaneseDream]

Thanks for making everything so easy to understand and using pace that is easy to follow along with.

[nitram_nosnibor]

Excellent, I was looking for it too :) Thanks Trav. Looking forward to the announcement you tease! :)

[ChamathNimantha]

The way you are presenting is so nice dude.... And it's very clear to understand.... Thank you for doing this kind of videos.... :)

[now-ptureddy]

Very good Explanation.. One stop to completely master flex... Thanks for the video

[bigray]

this is simply amazing. This flex stuff makes things so much easier, hope i will never use floats again.

[design]

Nice work! You helped me learn a lot about using flexbox and the practical use of them.

[TheMagnas]

Another fantastic series on the way! Thks!

[edwardkenemorales]

Whoohoh! I have been waiting for this!

[sanjanasahoo]

Great video!!Can you answer me how did you decide positioner dimensions??

[flinkstiff]

Yo Travis, i got a tip for you this time! If you don't want the codepen to reset to the top everytime you edit the html, you can add an ID to the div you're working on and then you can inspect the iframe where your project is loaded and add #yourDivId to the iframe src url. Then when you edit the html, codepen will reload the iframe hooked to your div. It is actually were quick to do and works well. Nice video btw :)

[zorkaio]

You bro are making my lines code cleaner with your tutorials !