CSS Flexbox Tutorial - Learn the right way

Too many CSS Flexbox tutorials start off with jumping into rows and columns and alignment. Learning these flex properties is important, but they are not fundamental to how CSS flexbox actually works. In this tutorial we'll learn how flex containers work by re-allocating the available space between all of the children (flex items). We'll start off with some of these fundamental properties of flexbox so that you can better understand and create many different types of layouts and scenarios to fit all your web design needs!
Learning CSS Grid? Check out my CSS Grid Video
💖 SUBSCRIBE (Please) 💖
kzbin.info?s...
📺 Related Videos 📺
➞ CSS Grid Tutorial: • CSS Grid Tutorial | Re...
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#css #flexbox

[@FollowAndrew]

The CSS Flexbox tutorial I was supposed to record 4 years ago :). Learn CSS grid as well: kzbin.info/www/bejne/iYGpdX9-g9JogbM

[@GultenA529]

Thank you, thank you. I used to use html and CSS many years ago. I am 75 now. I really enjoyed watching you teach. You are a great teacher. On one side the code and the other side how it looks.I will continue watching your videos. Learning new things, new ways makes me feel young. Greetings from Arizona.

[@FollowAndrew]

Great to hear!

[@CoolIntellect]

Thanks a ton for this! Understanding flex-grow, shrink, and basis was such a hurdle for me in Flexbox, and you nailed it by emphasizing their significance right off the bat. Your video's clarity is helping me grasp Flexbox better. Much appreciated!

[@FollowAndrew]

Great to hear!

[@NedumEze]

Great. Always empirical. Goes to the core of the subject. Never superficial. Thanks Buddy.

[@breadlyb]

Awesome tutorial, I've been meaning to dive into flex box for a while but I couldn't find an in-depth explanation. This bridges the gap between the documentation and a quick overview perfectly

[@bilalbeny4172]

thank you so much for his great video, 😌

[@user-gb5pr6ek7l]

There no options for align-items named space-*, so it fallbacks to stretch. justify-content and align-content have almost same options. so i think, justify-content is for arrange container children in the Main-Axis, align-content is for arrange container children in the Cros-Axis. align-items is for non-container children for example h1 in the Cros-Axis. Even though flex-start, flex-end, center for align-items and align-content have the same affect.

[@VincentYang024]

Thank you for such great tutorial, Andrew. The explanation of "order" property seems not quite right. Let's say you set 2nd item order to 2, it still pushes to the right end.

[@ThePowerfox13]

Thank you! very clear explanation!

[@coryjeffreys5146]

I like the way you explain things. but you should have built your example so everyone can follow along. I am brand new never set up a flex box yet watched your video but if you had build from the beginning it would have helped us newbies better me anyway.

[@yinandyoutuniverse]

15

[@johnbeaudin]

Not to pick on this channel specifically, but I think your thumbnail showing you pointing at a title is annoying in a useless gesture way. As if your audience can't figure out the concept of titles. Well... that's what it evokes in me. Even though you're not shilling anything, you look like other 'Tubers who are.

[@FollowAndrew]

Honestly, I think the same thing. But not pointless (awesome pun). Definitely an interesting topic and I could go on and on about this with over 20 years of web experience in SEO, Clickbait shenanigans that have been going on since the late 90's. One could argue that the video thumbnails are entirely pointless altogether as folks could just read the video title... However, humans are hard-wired to look at faces (& pictures), so the metrics and YT algo seem to favor thumbnails with people for those split-second click or not click decisions... Clickbait and nonsense KZbin seem to be promoted, while folks providing great content seem to be overlooked. Unfortunately we live in an instant-gratified, always-entertained, minuscule-attention span society at the moment. If your video doesn't jump-cut every 3 seconds, zoom in and out every 1.5 seconds etc. then folks lose interest. This comment is much too long, but since you're subbed you get the long-form response! I should title my next video "You're not going to believe CSS TIP number 3!", with a thumbnail of Mr. Beast, jumping off a cliff into a pool of sharks. That ought to do the trick. Cheers.

[@johnbeaudin]

FWIW, I do like most thumbnails. Not a few, in YT, belong in the "one weird trick" category.@@FollowAndrew