CSS FlexBox Essentials

Today we talk about CSS3 FlexBox. Everything you need to know to use FlexBox right away.

---

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:

[skmikos]

I DONT KNOW HOW! I am a begginer in this whole industry and I started to create my own website. I had to center 5 circles and i tried like a slave to do that using position absolute+bootstrap+ all my knowledge for one hour or something. Then I went to smoke a cigarette and entered youtube. THIS WAS THE FIRST VIDEO sooo I clicked on it because for the last 4 days or so I am following you (by the way, not only I love your work, but I love the person who you are, very clever and very gentle). Anyways, I solved my problem in 10 minutes (because I watched the video for 10 minutes) + 5 for working. Thank you very much!

[Norie]

I wish every tutorial on YouTube was like this. Clear, High Quality Audio & Video, No Fluff, this is gold. One of the easiest subscribes I've done.

[DevinAOnline]

I love how you do your tutorials! The fact that its not just recording your screen, with voice over added makes it so much easier to watch. Adding yourself as an extra visual definitely helps with the experience.

[amnesia]

Definitely one of the best CSS Flexbox tutorial so far.

[DaFunkySapiens]

Thank you so much for this one. I started the whole "web/designing-stuff" way back in 2000 and somewhere down the road lost my way and didn't catch up with all the new stuff that happend over the past 5 years. But your videos are so much fun to watch, that I am trying to catch up now. 

You brought the fun back for me. Thank you so much. I owe you a beer.

[ianvischansky]

First video of yours I couldn't stand your delivery (well the intro parts anyway). I kept finding myself coming back because of your meaningful content. Now I am a huge fan and glad I could get on board. I can now appreciate your quirky style. I love your work and I think you're one of the best teachers out there. Keep up your fantastic work!

[sheltsagain]

This is pure brilliant. I've spent days reading stuff at work (videos are blocked) and it just doesn't sink in. Now i can watch a video it really makes sense. i've just subscribed, top work lad, thanks!

[MyLifeMystylebyVRK]

I'm a beginner...ya, its been 3 yrs, u've uploaded this...but its really helped me a lot to understand flexbox...Ur teaching style is so cool...Don't get bored even a second...thank u so much for sharing ur knowledge...I'm gonna subscribe now...!!! keep goin... :)

[nareshpal]

sir im new to web world and trying to stay here and continuously searching the way
and finally I find the valuable education station here
the way of teaching is asowame

[renatoflores]

I'm totally blown about flex boxes is the best that someone has ever created! its like putting bootstrap, relative positions, fluid heights and widths, floats, and more everything in one! Really I totally can't get a hold of myself I'm literally jumping of joy because of this flex boxes existing, also nice video and keep on the good work!

[RameenFallschirmjager]

Extremely high quality content with zero ads! Amazing!

[JacklapottTv]

I have a strange feeling when watching your videos, it's super clear and very relaxing keep on it you're the best

[GasolineNl]

Watched this again after I already use flexbox for almost a year, but it gives me still new suggestions. Very clearly explained.
And I didn't know about nth-child. That's a neat thing to use in my stylesheets.

[kittnbiscuits]

I am just starting my web development path and this video was super helpful in breaking this subject down. Thank you!

[d_dd.]

You are amazing! Hats off!
I didnt know these latest techniques!
While driving thought why not just listen something ui dev related to prepare for interviews and found you after searching css properties. Assuming I will find someone keep speaking all latest properties tags and techniques but since these are not audio only I watched after driving and loved your parallax examples part 1 and now watching this flex-box lots of people asking in interviews these perhaps.

[uilifecteau]

Hey Travis, just shared this with my cohorts at the Enspiral Dev Academy in Wellington New Zealand. Rocking man! Thanks.

[MichaelRichins]

Thanks Travis! As always, your videos rock. Just a tip here: I better understand flex-grow as introducing more children to the parent. In your example you have 5 children elements. By changing one of the children to have a value of 2, your total number of items has grown from 5 to 6. So that child now takes up 2/6th of the parent leaving the other children as 1/6th. If that makes any sense.

[ruslandoronichev]

Yesss. I thought about Flex Box few weeks ago. And now BAAAMM. The whole video about it. May the force be with you and thank you for this really good explanation. 

[carocaro]

This truly is a great video! So easy to understand, it is useful, interesting and amusing. I've just finished transforming a large bus and train timetable website so that it is now mobile-friendly but there are a number of alignment problems. After trying various fixes, I have found the solution with flexbox and that is thanks to your video.

[DarcyCardinal]

I'm already enjoying using Flexbox over previous CSS "hacks" thanks for the explanation!