CSS Flexbox: The Most Detailed Tutorial with Real-World Examples!

Video Description

Example Files: https://github.com/RoyChng/CSS-Flexbox-Tutorial Challenge Files: https://github.com/RoyChng/CSS-Flexbox-Challenges 🎥 Video Description: CSS Flexbox is an incredibly useful tool when trying to create modern layouts for the web. In this video, I focus on all the essential concepts of CSS Flexbox: From the justify content & align items property, to using flex grow and flex shrink! But just knowing what these properties do isn't enough to know when to apply them. This is why I have also included 3 real-world examples that we look at along the way, and which I highly encourage you to try out and experiment with as well! If you want some extra practice with using CSS flexbox, which is definitely necessary if you're just starting out, I would highly suggest trying out the last two challenges as well. Even if you can't complete them, your skills will naturally improve, and you'll know where are your strengths & weaknesses. ⏰ Timestamps: 00:00 - Introduction 00:30 - Justify-content 04:32 - Align-items 09:30 - Nesting Flexboxes 10:20 - Flex-wrap 12:10 - Recap of Flexbox Basics 12:54 - Flex-grow 14:55 - Flex-shrink 15:50 - Flex-basis 20:44 - Flex shorthand 21:22 - Align-self 24:13 - Recap of Advanced Flexbox 24:50 - Extra challenges