Summary
Keywords
Full Transcript
Starter Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-22_flexbox-part-1/starter-code Final Code: https://github.com/procodrr/frontend-bootcamp/tree/main/ep-22_flexbox-part-1/final-code Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp Flexbox Froggy Assignment: https://flexboxfroggy.com/ In this video I have explained how flexbox box works very much in Depth. I have explained not only theoretically but by doing practical and showing everything in the dev tools. We'll learn why and how much flexbox shrinks an element when we shrink the parent itself. We'll see the most commonly used properties with flexbox. We'll also learn how to center one or multiple elements using flexbox. 📖 Chapters 00:00 - Introduction to Flexbox 02:27 - Download & Understand the Starter Code 04:28 - Max Content & Min Content Width 07:57 - Make an Element a Flexbox 19:37 - Install Mozilla Firefox 21:36 - Understand Firefox Dev Tools 22:03 - Visualize Flexbox Using Firefox Dev Tools 30:40 - Understand How Flexbox Shrinks Elements 1:01:48 - Flex Shrink Property 1:07:19 - Flex Grow Property 1:20:14 - Justify Content Property 1:21:06 - Align Items Property 1:24:53 - Center Elements Using Flexbox 1:27:24 - Justify Content Space Between 1:30:25 - Justify Content Space Around 1:31:08 - Justify Content Space Evenly 1:32:47 - Space Between: The Most Used Value 1:35:36 - Problem People Face with Aligning Items 1:37:38 - Flex Direction Property 1:37:57 - Flex Direction Row & Row Reverse 1:38:53 - Flex Direction Column 1:40:00 - Understand Flexbox When Flex Direction is Column 1:46:02 - Conclusion 1:47:14 - Flexbox Froggy Assignment 1:49:08 - Previous Video Project Fix If you have any doubt you can ask in comment section I will reply to each and every question or you can reach out to me directly on my social media handles mentioned below. Social Media 🌐 Linkedin: https://www.linkedin.com/in/anurag-singh-web-developer/ 🌐 Instagram: https://www.instagram.com/procodrr/ 🌐 Twitter: https://twitter.com/anuragsinghbam 🌐 Telegram: https://t.me/+bq8CBsPL3Wc1MjU1 🌐 Discord: https://discord.gg/dMe9mer9B3 🌐 Portfolio: https://anuragsinghbam.com/ Music by geoffharvey from Pixabay #css #cssflexbox #flexbox #responsive_web_design #css3course #webdevelopment #webdev
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
