Flexbox Crash Course 2024

Flexbox is used for space distribution, positioning and alignment in CSS.

💻 Project Code:

👇 24+ Hour HTML & CSS Course (Just revamped!)
👇 Udemy Version:

💖 Show Support

👇 Follow Me On Social Media:

Timestamps:
0:00 - Intro & Slides
5:05 - Setup HTML & Base CSS
7:50 - Create a Flexbox Container
8:20 - Float Example
9:49 - Justify Content
11:05 - Align Items
11:39 - Align Self
12:50 - Flex Direction & Column
15:15 - Centering Elements
16:32 - Flex Wrap
17:39 - Order
18:37 - Flex Basis
19:30 - Flex Grow
22:13 - Flex Shrink
23:58 - Flex Property
25:40 - Flexbox Layout Project

[tdematos]

Not only did he explain the flex properties in detail, but he also showed how to apply them to a real-world example. Amazing video!

[kariminic]

Haven't finished watching but I'm certain that the content in this course is gold. Just wanted to appreciate your efforts to educate us in numbers for free. You're the real GOAT 🐐 in the tech :-)

[ramasoft]

Shoutout to you Brad from Ethiopia; I'm trying to teach myself web development and I consume your content as much as I can. Thanks for your effort you are a great gift to the world. Keep up Never stop the good thing you are doing as people are benefiting big time from your work!.

[virtualbrian]

Brad, Im sure that you've heard this before but, you've got a gift for teaching. Well done and thank you! Some little pieces that I was confused by with Flexbox are no longer confusing. Thanks!

[Ts-yyjn]

I learned flexbox from your previous crash course about flexbox years ago but still its so relaxing and enjoyable watching this new crash course from you Brad 😁❤️

[VIBrunazo]

"Grid for the overall layout, and Flexbox for the items inside it"

That's a great rule of thumb for combining the 2. I do the same thing! Another one "if you're using too many fixed width items on your FlexBox, you probably should be using Grid"

[evyan]

I’m so grateful for this video. The amount of hours I spent trying to fix alignment with float. This lesson is gold for a perfectly optimised layout ❤️

[mykalimba]

38:50 would be the perfect time to introduce "gap" property, which is supported in flexbox by most of the major browsers.

[juanpablocl]

I discovered your channel recently and I feel like I really need to thank you for the super VALUE, explanations, examples, etc. you are sharing for FREE.
Thanks and keep up the good work! Hope you are doing terrific!

[abstractworld]

Bro, I've sat through countless videos, took at least 3 different courses and STILL could not understand flex. This video is absolutely 100% THE video to watch for understanding the Flexbox Model. Amazing work!

[imadalnajjar]

I don't think there will be any tutorial like this one; it is organized to keep the information in memory for an extended time. I always open Brad's channel to get any answer, and I almost bought all his Udemy courses; he teaches any subject professionally. Thanks again, Brad.

[__greg__]

I've been pretty 'trial and error' with flexbox the past few years, and this is lesson has by far been the best for improving my understanding of what it's actually doing. Much thanks! 🙏🏽

[mattwhalen]

Came here from TOP. The video does a great job at showing a real world use case. A lot of the TOP content gives you bite size pieces which makes the final exercise hard to grasp. This clears it up immensely!

[mobeenrajpoot]

This is what i was looking for. Briefly explained with a full fledged responsive project. I really appreciate that.

[christellemeyer]

Thank you so much for this video, this is the most comprehensive one I have seen so far. You made it look so effortless. It was easy to follow, and I appreciate the fact that you did not stop the tutorial right after "flexing" the divs.

[rafihasan]

I was strugling with Flexbox, knew all the properties and what they did but I couldn't use Flexbox at all. Now everything's clear! You are a legend, thank you so much!

[adamdixon]

Amazing work! This is the first tutorial that I’ve actually been able to follow along with and understand. Thank you

[JesseSwagz]

Hi! This is an appreciation comment, this course is Gold.

[rodblues]

You are a fantastic teacher, I can't tell you how much this video has helped me. I was on the verge of despair in my bootcamp with flex, but this video has shed so much light. This is reference I can return to again and again. Thank you!

[whateveritwasitis]

love your stuff. you explain each action and dont take for granted we know or dont know. too many do, and so much time is lost.