CSS Flexbox Intro | Flex CSS Tutorial for Beginners

[@DaveGrayTeachesCode]

When flexbox was introduced it dramatically changed how we think about constructing CSS layouts. It is essential to understand the fundamentals of flexbox, and in this tutorial, we'll review all of the flexbox properties that you will frequently use and explore how they can impact your CSS layouts. If you are just getting started with CSS, I recommend going to the beginning of this CSS for Beginners playlist: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@nikoryu-lungma]

Flexbox is the main tool I used to make the website responsive. From the projects I have worked with(in the companies I worked at), i can summarize 4 common ways that most developers use to make their websites responsive. They are: - Flexbox, a.k.a display: flex - Grid - @media, a.k.a media query - Using custom hooks of ReactJS. In the last company I worked at, they created a custom hook called "useResize", then they use that hook to make the screen responsive. Those are 4 common methods I see Developers do. I don't know if there is more, so you are welcome to show me more

[@johnmcaulay4348]

Dave you have a true gift for teaching. I was already pretty good with CSS, but watched this playlist anyway and I gotta say, I learned a lot more and was able to sure up a lot of my knowledge that was lacking in certain areas. This playlist was literally full of "aha" moments for me. Thank you! I think at the end of last year I predicted 100k subscribers for you by the end of 2022 and it's looking like you're well on track for that, congrats on all the hard work my friend!

[@DaveGrayTeachesCode]

Thank you for the kind words, John! 🙏 Building this CSS playlist and course was good for me as well. I had what I thought was a good understanding of CSS, but I continue to learn as I teach, too! Always good to review the fundamentals. 💯

[@yatin1370]

Flexbox Froggy was such a good way to test the concepts!

[@t6hp]

This was helpful and succinct as well, thank you so much!

[@DaveGrayTeachesCode]

Welcome!

[@Grihlo]

Thank you Dave! That's where things are getting more complicated.. and that Froggy adds some fun to the learning process - great advice at the end of the video to play for practice!

[@DaveGrayTeachesCode]

Very true! The games can be challenging and fun! 💯

[@GabrielSouza-yy2rq]

Phew this is a dense subject. Better get a notebook and take some notes to help assimilate the content. Anyway, your teaching makes it much easier to understand the topic. Thank you Dave!

[@DaveGrayTeachesCode]

You're welcome! The recommended game at the end helps you learn how to apply some of these rules, too. 🚀

[@ilijajovanov3857]

Dave, thanks a lot for this wonderful tutorial, I have learned a lot from you.

[@DaveGrayTeachesCode]

You're very welcome!

[@andromilk2634]

Hi Dave, I feel like this one went a bit too quickly, I feel like there are some nuances which I might have missed if it was my first time learning about this concept. Thanks again.

[@jipeejoce1353]

This is a very great tut for a reminder ( but not too beginner friendly imo).

[@DaveGrayTeachesCode]

Thank you for the feedback. 🙏

[@reitei1756]

Thank you for the great explanation and also thank you for recommending flexbox froggy, really fun!

[@DaveGrayTeachesCode]

You're welcome!

[@ahmadsebaey1830]

You're a great teacher Dave ❤️

[@DaveGrayTeachesCode]

Thank you, Ahmad!

[@David-ek1ye]

Another top-end tutorial. Your teaching skill is really good, Dave. Thanks a lot.

[@DaveGrayTeachesCode]

You're very welcome, David! 🙏💯

[@ajaysan2765]

Thank you so much

[@DaveGrayTeachesCode]

You're welcome!

[@haregka7430]

Wow! Best teacher!!!

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏💯

[@ahmad-murery]

Not sure whether or not there will be a part2, if not maybe it worth mentioning that we also have some useful properties such as justify-self/align-self Thanks Dave,

[@DaveGrayTeachesCode]

No part 2 in this series. I wanted to give everyone a good start with the Flexbox fundamentals. There are so many properties and full multi-hour courses exist for both Flexbox and Grid so you will find me leaving some out. Your suggestions are good additions! Always great to hear from you, Ahmad! 🙏💯

[@ahmad-murery]

@@DaveGrayTeachesCode Fair enough, not trying to pretend to be smart (I'm not), I only wanted to say "Hello" by adding a comment, I do really appreciate your continuous efforts to simplify the complexity of web development 👏👍🚀

[@DaveGrayTeachesCode]

@@ahmad-murery your comments are always welcome my friend 🙏

[@sonamohialdin3376]

Awesome tutorial thank you very much

[@DaveGrayTeachesCode]

Welcome!

[@vishaldeswal4413]

Hi Dave, I got one problem regarding align-content and align-items, I have written same code till 12:36 timeline. But instead of writing align-content: space-evenly I have used align-content: flex-start. it is working fine when flex-items are wrapped in multiple lines on change size but when flex items are not wrapped in multiple line, even then align-content: flex-start is overriding the align-items: center property. Could you just tell me why this is happening.

[@iambrijeshtoo]

Thank you!

[@muhammadsheharyar3052]

Thank you, Sir.

[@DaveGrayTeachesCode]

You are very welcome!

[@uniquebanda69]

I LOVE YOU .teaching-skill { 100%, auto}; #knowledge {100px, 100px}; Lots of LOVE from India👌❤️

[@DaveGrayTeachesCode]

Thank you so much my friend! 🙏 Very creative comment! 💯🚀

[@designsxnellgraphics8667]

Thanks Dave. I have to say ur method of teaching is top notch

[@MuradHasanFahim01]

what is the simple difference between justify-content and align-items? I am confused !!!!

[@IramKahkashan]

Hi Dave, Before applying Flex when we set the box class width and height then when I change the height to 50px then its change as it should but in min-width doesn't effect the container, width always occupy all space in container either min-width is 100px or 50px. We are not providing min-width:100% to occupy all space in container horizontally then why all container becomes dark horizontally. Expecting response, Thank you.

[@mischief9499]

because box (declared as div here) is a block level element and it takes the full width of its parent

[@bnmbnm7278]

hi. I still can't find the 14th lesson in the github... And, will you teach about css link svg?(url(svg link)....), thank you

[@DaveGrayTeachesCode]

Thank you for the request and also for the reminder - uploading the source to Github right now!

[@iramimran3117]

Hi Dave, hopefully everything fine. I am trying your flexbox awesome tutorial. Please tell me one thin when reduce the screen dimension at very very small my div stop to shrink and overflow the container, how can I resolve it? Expecting response.

[@DaveGrayTeachesCode]

When you say "expecting response", it is not necessary. It implies I don't respond unless you say that, but I usually do. I'm sure that is not your intention but I wanted you to know it is not necessary every time you post a question. Your size issue can be impacted by several things. Does anything in the page have a minimum width? They won't shrink beyond that size.

[@iramimran3117]

@@DaveGrayTeachesCode Oh ok next time I'll not write expecting response.

[@iramimran3117]

And you always respond.

[@iramimran3117]

@@DaveGrayTeachesCode body{min-width:100vh}

[@DaveGrayTeachesCode]

@@iramimran3117 not recommended. You dont really need a min-width on the body. It will be 100% and shrink relative to the size of the viewport.

[@RahulYadav-wn5gn]

Hey Dave

[@DaveGrayTeachesCode]

Hey Rahul!

[@RahulYadav-wn5gn]

@@DaveGrayTeachesCode can I get a job after learning HTML CSS JavaScript and React only...

[@TejaDurgi]

hey! can you please check out CSS playlist u added something by mistake into your css playlist.

[@DaveGrayTeachesCode]

Fixed! Thanks for the note! 💯

[@Adnan-h7t6y]

Its hardly understand for me flex box from your video. Could you modify flex box concept for beginner. But thanks for share you knowledge for these concepts

[@DaveGrayTeachesCode]

It may help you to read other articles and watch other videos about it, too. Also, try out the Flexbox Froggy game I recommended.

[@Adnan-h7t6y]

@@DaveGrayTeachesCode Yep I try read article and try the game at the last .thank you for it .

[@webb-developer]

☑

[@ndudirichinazaekpere533]

Thank you!

[@DaveGrayTeachesCode]

You're welcome!