Traversy Media | Flexbox Crash Course 2024 @TraversyMedia | Uploaded January 2022 | Updated October 2024, 8 minutes ago.
Flexbox is used for space distribution, positioning and alignment in CSS.
๐ป Project Code:
codepen.io/bradtraversy/pen/JjrzzOW
๐ 24+ Hour HTML & CSS Course (Just revamped!)
traversymedia.com/modern-html-css-from-the-beginning
๐ Udemy Version:
udemy.com/modern-html-css-from-the-beginning
๐ Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
๐ Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
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
Flexbox is used for space distribution, positioning and alignment in CSS.
๐ป Project Code:
codepen.io/bradtraversy/pen/JjrzzOW
๐ 24+ Hour HTML & CSS Course (Just revamped!)
traversymedia.com/modern-html-css-from-the-beginning
๐ Udemy Version:
udemy.com/modern-html-css-from-the-beginning
๐ Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
๐ Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
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