The Ultimate CSS3 Flexbox Tutorial - Colt's Code Camp

[@mashrukul]

I'd lay my mark here, the best flexbox tutorial in entire youtube just landed..

[@__donez__]

0:00 Intro 1:18 Soooooo what is Flexbox? 4:22 *Container properties* 7:33 Main axis, cross axis 8:32 flex-direction 11:02 flex-wrap 15:06 justify-content 21:19 align-items 27:44 align-content 30:01 *Flex Item Properties* 30:25 align-self 31:56 What is flex? 32:34 flex-basis 37:05 flex-grow 40:19 flex-shrink 41:58 flex 43:43 order Exercises 14:12 Exercise 1 20:36 Exercise 2 26:04 Exercise 3 35:41 Exercise 4 52:36 Exercise 5

[@ToriKo_]

Bless

[@darrynjacobs8550]

Missed the exercise @20:36

[@__donez__]

@@darrynjacobs8550 Thanks for pointing that out, I'll add it!

[@yashdesai8372]

Thanks man!

[@almahmudalif7102]

God bless you

[@londonsky1835]

Never thought that Ill understand flex box that quick. Thanks Colt!

[@NotPastelDreams]

Thank god. after watching 100 videos I finally found the one which cleared all my doubts. This is the best Flexbox tutorial I have seen.

[@Cysecsg]

Watching this video beats other countless flex tutorial videos out there. Im subscribing.

[@lewisbentley3177]

This was really useful. Your Web Developers Bootcamp was my intro to everything code and now I'm making my own projects. Appreciate this great content.

[@l9elnine76]

Such a great tutorial. My understanding of flexbox is much clearer. It helped to know that I wasn't the only one struggling with all of the different properties and values. Thank you.

[@CarlitoProductions]

i bought your awesome courses on udemy, then just discovered that you had a youtube channel with really amazing quality and up to date stuff. I'm glad, cause your courses/teaching material helped me find work! Thanks!

[@afaqahmad6561]

Thank You so Much sir!! This tutorial means a lot of sir i spend a whole day on other tutorials to understand this topic but after your video my concept upon this topic is cleared.

[@JesusSanchez-cd3ze]

As always, Colt uploading top tier quality content. Thanks a lot, man.

[@miguelbm1989]

Hi Colt! I got an intership job thanks to your bootcamp :) Today I had to do a AB Testing where I have to switch buttons order and this helped me a lot! thank you

[@Saad-Sadiq]

Two of the best tutors on YT, Brad Traversy and Colt Steele. I love the content Colt releases and have bought all of his udemy courses to show support.

[@rajeevkumar2506]

You deserve much more subscribers Colt 🙏

[@punctdaniel]

Love the approach with the small exercises that test what we learn as we progress.

[@rice5817]

Freakin' love you Colt! Congratulations on the 100k subscribers! You do really deserve more than that though ;) I've been trying to learn from all kinds of people about flexbox, and now I saw that my favorite KZbin & Udemy instructor Colt Steele has an EXTENSIVE VIDEO WITH EXAMPLES that makes us understand it all in one go. Keep up the good work! :D

[@UNKNWN96]

I'm here from the Udemy Online Web Dev Bootcamp and can say I personally think your KZbin video is much easier for me to follow and understand. Really appreciate all the hard work you are putting into your content!

[@haythamkenway8343]

You'll hit 1M in no time if you keep up the pace! btw I love the exercises 😍

[@Artist19]

This tutorial has helped me out a ton! I was having hitting wall with flexbox, now I little more competent. Thanks for this!

[@solidstate9105]

Best flexbox tutorial I've seen! Even as an experienced web dev I still learnt some things there.

[@endersongomez9648]

You are the best code teacher ever. Period. Making it looks easy.

[@wizaaar]

Colt, congrats on your subscribers! Your bootcamps and tutorials are awesome. I've gotten pretty good with back-end frameworks and front-end JavaScript, but laying out content still eludes me

[@MohammadK28]

The best 1 hour I've ever spent Thank you Colt

[@UlyssesOfOmaha]

Awesome work! Thank you for sharing your knowledge. This was a breakthrough for me in terms of CSS. I used to just google everything and change properties until things worked out. Now I actually know what the terminology means -- for the next couple of hours like you correctly reflected.

[@BGP_23]

I just have to say Wow!. This is one of if not the best videos on FlexBox. Thank you so much for putting this out, it helped me understand this much better.

[@tedshapera8062]

There were gaps in my understanding of Flexbox and many were covered here. The little challenges throughout the video were great. I'm definitely looking forward to the grid one! Thanks again Colt, I'm sure I'm not alone in saying how much I appreciate them!

[@timeforgamesYT]

Hi Colt! I bought your "Modern Javascript Bootcamp Course" to support the amazing work you're doing here on KZbin. It's great! I'm interested in the more advanced topics, but I decided to also fast-forward through the initial sections and fill in some of the gaps. Boy, am I glad that I did because I learned that: 1. I need to watch Amadeus and 2. The harlequin shrimp is a very pretty, yet extremely savage species of shrimp. I can't wait to see what I learn next! At this point, I don't even care about Javascript anymore. 😂

[@adiemuller9486]

This is super helpful and a really good FlexBox supplement to your Udemy class! I was really confused about align-items and align-content before, but I think I finally understand now! I appreciate the exercises because they made me realize which things I can apply, and which I need to study more.

[@mariaisabellh9191]

Thank you so much for this video! I am a beginner and just familiar with frontend webframworks, so I did know nothing about flexbox whatsoever. This video really helped me and you explained everything really simlpe!

[@philrusselantiporda7096]

Thank you very much for this awesome series Colt. You deserve more than 100k subscribers! I've shared this playlist on every social platform that I have an account with as a thank you to your teachings. Stay safe and stay sane!

[@jenisrai1699]

Congratulations!!! A great teacher of mass online students 😍

[@CelestialCadences]

This is the flexbox tutorial I've been looking for, thank you! Recently took one of your Udemy bootcamps as well, loved it, learned a lot. Always quality work from you, including your photography. I hope you've been able to get out and get some great shots despite the lockdown...escaping in nature is good for the soul! Take care.

[@samimsheikh962]

finally completed all of your css and html videos ....had been a great experience , the value of this content is top notch. please open a patreon account

[@njamrutharikka4105]

hi.....colt,its really a useful and understandable video for the people like me who don't know how the flex and its properties work.Iam really happy that iam going to use flexboxes in my practise ...you made a best video on the flexbox which would help so many students like me...thank you so much

[@nevyana]

I absolutely love all of your videos! I am amazed of how well you explain everything. Really appreciate your effort to share this beautiful code camp with us for free! Thank you Colt!

[@codeshah9570]

The best flexbox tutorial on KZbin

[@Danachew]

Congrats on 100k Colt!!

[@JP-zp6ob]

Easily the BEST flexbox tutorial on the internet

[@candacelewis9611]

This was awesome & a perfect explanation. Love the inclusion of a Code Pen to play with the examples & how you stop for little quiz challenges - Thanks!!! :)

[@rastkogojgic699]

I'm following your Udemy course, and I also watched this as additional explanation of the flexbox. I just want to thank you for the amazing content. If I manage to become a developer and get my first job, that will be thanks to people like you!

[@HarmSalomons]

Nice offer, but I've already been a software designer for 36 years and now busy developing a web application (which was never my work before). It was a pleasure following this course.

[@goodsamaritan208]

57:41 Maybe the active border(light blue) can be changed to border-right or left to highlight on the side instead of border-bottom in small screens.

[@blessingaliu123]

This is the BEST Flexbox video on youtube and I have watched a lot! Thank you Colt !

[@kamranjohn4671]

Appreciate the effort put into making the course available for everyone.

[@jagraj8313]

For exercise 4 I: made two classes for all the 9 divs, and in css I did this. .fl-bs { flex-basis: 50% } .full-bs { flex-basis: 100% } Thank you for the help

[@artemiscy1194]

You are REALLY thorough! Thanks for demystifying Flexbox for us, man! Cheers! 😀

[@RitikRaj-ih5sx]

I wanted to understand the flex property and now I do. Thank you for the wonderful explanation

[@ferozalimeghani2561]

It is the best flexbox tutorial. Very informative and easy to learn. Thanks for this great tutorial video on flexbox.

[@ZiqiFang-c2u]

A Big Thank you for such informative and clear content! You are the BEST teacher at this topic!

[@ericguzman4043]

recently I been trying to improve my understanding of flexbox and this video definitely helped. I feel I can achomplish the majority of stuff I relied on grid to do.

[@pah4955]

Best video on flexbox I've seen. That's Colt!

[@dimasmayda8021]

Love the way you teach man! I was doubting in wich Udemy course for web developer should i take, but definitely this video helped me to decide :). I can see i´m going to enjoy your course a lot!

[@CurtisKnudson]

I rarely comment on videos, but yours are exceptional every time. Thank you so much Cole for being such an excellent educator.

[@supersuperfastjellyf]

Brilliant content - a new sub from 5 mins in - excellent examples & great tutorial style - thanks 🙏 so much for demystifying flex box

[@gangavarapuvasu6817]

I am thinking about flex boxes today . you did video ...... Tq sir

[@theolavaux]

I've acted the 404th like, that describes how much my brain exploded after you explained those concepts so easily. Thanks!

[@CoentraDZ]

that was a great tutorial, I enjoyed learning flexbox as a person who hate html/css.

[@manujabandara8487]

This is the best tutorial for flex box in whole youtube. Great tutorial. Thanks

[@ranjanun]

This is by far the best tutorial on Flexbox ..Thank you very much for this

[@2u841r]

thank you, very well explained. also thank Coder Coder Jessica Chan for sharing this.

[@sharsports4249]

This was a wonderful video with lots of golden information. I have used this and the layout on my website has become way better and it looks more professional. Thank You. You are Amazing!!

[@thevoker1713]

hey colt i really needed the flexbox tutorial aaand u made the best one! thank you.

[@michaeld1051]

Refreshing and straightforward! I scrolled through your other videos I didn’t see one on CSS Grid maybe I missed it. Are you planning on doing one for grid?

[@harshitrohilla1055]

Don't have many words only thing that i can say is AMAZING 🔥🔥

[@ze_chooch]

Great overview of flexbox. Thanks for putting this together for us!

[@worldclasscode1847]

Yes, agree :)

[@lanegarner8178]

Wasn’t there a grid video in this series? Where did it go?? I need it! But seriously, you explain things so well and I was hoping to revisit it. Looking forward to the Udemy course update as well! Thank you so much for these videos... they were incredibly helpful to me on my journey learning to code!

[@syedsharyarjavaid9853]

Best Flexbox tutorial. Do you recommend doing more practice exercises on Flexbox before moving on to next topics like CSS G rid and media query?

[@pallab10]

Hello Colt, at first congratulations for the 100K subs! I was wondering if you can provide the links to the slides from which you are teaching us it'll be really helpful. Anyway thanks for being a great teacher. 😀

[@Mahur_World]

Thank you so much for your time. Finally understood after watching it many times.

[@umangagrawal228]

why does it overflow when stacked vertically but when it is put horizontally by changing the width it overflows?

[@rohithbti2k7]

Excellent! Definitely, the best one I found! Thanks, Colt.

[@WanSyazlina]

Hey Colt, I absolutely love your videos and design. Can you please do a video about web architecture perhaps?

[@tamera4123]

the exercise at 35:49..i managed to get them in the correct layout but it overflows the container. how do i fix that?

[@thekubera]

Thank you colt:) I love your way of teaching ❤️ You are great!, love from Nepal

[@teerapatprommarak2070]

Congrats Colt!

[@droidnoob5965]

@26:04 I have the same exact code but my output does not look like yours

[@spiritosa0123]

12.01.20 Love your tutorials ! Deciding if I should use FLEXBOX or GRID as a beginner to CSS

[@alvinacosta2312]

Great series! one question though, when do i need to use grid vs a flexbox? i was taught to use flexbox for one directional layouts and grid for two-dimensional. but it seems flexbox is also for two dimensional layouts.

[@edwarddieffenbach3270]

Is the default for align-items not stretch? Initially you stated that flex-start was the default but at 23:05 you said it was stretch. At 27:28, setting align-items to flex-start gives the same outcome as setting it to stretch.

[@2u841r]

21:58 centered a div? you're hired.

[@ademineshat]

Pretty useful and very understandable. Thank you Colt 🙌

[@bloxzyo]

This is the best flexbox tutorial ever!!!!!! 😊

[@ricardobozzi7731]

At 51:30 how come you didn't have to change the order of the main article as well? At that stage they were both 2

[@ahzootube]

Subscribed in seconds. Great content Colt!

[@studentaj8467]

Colt I can't waiting to see ur css grid tutorial 🙏

[@tadakuniyasuda8214]

It was exhausting, but i learnt and got to practice my flex skill. Thanks.

[@qasimnawab957]

absolutely love your videos bro keep up the good work.

[@arjunm3747]

Here 14:08, Did he just swapped the axes purposely 😶 or it's a mistake ?? Anyone pls tell 😐 ?

[@peterjuff]

36:43 nth of type! Need to remember this one.

[@whiskyandgunpowder]

Well organized, well presented. Thank you, very good. 🙂

[@barrettokarate]

Great video, but I'm having issue with items outside the flexbox. For my header I'm using a flexbox made up of three items, and underneath it I want to place a navigation menu. But instead of showing up underneath the header/flexbox it shows up at the top of the page in front of the header. Not sure why its happening. I've placed it inside a "div" and a "section" and neither seem to work. My main "UL" position is set to "relative". Should I change it to something else?

[@e.m.janssen3638]

Thanks so much for this tutorial, super clear and helpful. Really appreciate it.

[@worldclasscode1847]

Great vid! Flexbox is so key

[@mytechlife9884]

Hey Colt This is an awesome video. But there is a tiny little mistake. ( Maybe it is not a mistake as I am just 16. But you can check it) Here it is. So, actually, flex-grow: 1 and flex: 1 are not the exact same thing. Remember how the default for flex-basis is set to auto. So, when we set flex-grow: 1, the value for flex-basis will of course remain unchanged. However, flex: 1 will not only set flex-grow: 1, but it will also change flex-basis to 0. So, basically, the difference between flex: 1 and flex-grow: 1 is that the first sets flex-basis: 0, while the second will keep the default of flex-basis: auto. When we add flex-frow:1 the flex items get the remaining space evenly. (Only space It means remaining space add to flex items evenly, whatever their width) But When we add flex:1 (without giving value to the flex-basis ) all flex items get the same width, not the remaining space evenly whatever flex item's width... I know this looks a bit confusing, so read it multiple times :) I hope this makes sense! Here is the code pen link. I checked it with your projects. I added some more letters to see the difference easily.👇 codepen.io/kulajMan/pen/BaRVLNO 👈👈This is code pen link with flex:1; codepen.io/kulajMan/pen/YzVvGXr 👈👈This is code pen link with flex-grow:1; If this is a stupid argument, I am sorry...😥 If this is correct 👍👍 like to see other Viewers😁

[@tesoi8057]

@coltsteele, I am coming here from your Web Developer Udemy course. It is ironic that I had to come to KZbin to get content that I believed I paid for, because, instead of showing us the way to use flexbox and other valuable CSS properties, you went with pre written Bootstrap which essentially had me f****d up for the past couple of months trying to understand it. I still love your teaching, which is why I am not madder at this moment, but I hope you will consider what I just said, and maybe place this on Udemy, too. Thanks.

[@hamzajaved1115]

Congrats on 100k

[@studentaj8467]

Wow awesome tutorial Colt, keep doing like spoon feed. for beginners we need full project website video tnx.

[@ashrodders]

underrated awesome teacher

[@tapestryofgrace5]

This was worthwhile. Thanks Colt!

[@jasonhensley7762]

Hi Colt. The codepen links that I am getting are not showing the same thing initially as yours. I am trying to follow step by step but something in the code is not displaying the same. My boxes arent fitting inside the border the same as yours are. So I was unable to follow along. If you could help me here it would be greatly appreciated. I followed your code to double check whats being displayed on mine along the way, and have not edited anything, but couldnt spot any differences. Id really appreciate if you could address this, so I can master this concept before I start my codecamp. Thanks.

[@shopmojic9418]

can we see a syllabus and does do your job applies to remote jobs only