Autoplay
Autocomplete
Previous Lesson
Complete and Continue
CSS Flexbox : Build Modern Web Layouts With Flexbox
Introduction to the course
Course Introduction (2:24)
Introduction To CSS Flexbox
Section Introduction (0:27)
Understanding Flexbox Improved Web Layouts (7:37)
Flexbox Terminology (5:02)
Current Browser Support For Flexbox (9:20)
Tools We'll Need (2:18)
Section Summary (0:32)
Quiz 1
Getting Started With Flexbox
Section Introduction (0:29)
Creating Our First Flex Container (10:21)
Understanding Flexbox Flow Axis Directions (3:41)
Setting Flow Directions (5:28)
Understanding Flex Widths (11:37)
Controlling How Child Flex Items Wrap (7:16)
Shorthand For Faster Coding (4:13)
Section Summary (0:31)
Quiz 2
Controlling Element Alignment
Section Introduction (0:34)
Main Axis Spacing & Alignment (9:28)
Vertical Spacing & Alignment (4:46)
How Margins Are Impacted By Spacing & Aligning (3:55)
Cross Axis Spacing And Alignment (8:19)
Controlling Alignment Of Individual Flex-Item (8:06)
Handling Spacing With Wrapped Flex-Items (6:24)
Controlling Flex Item Order (11:45)
Section Summary (0:23)
Quiz 3
Establishing Element Flexibility
Section Introduction (0:36)
Establishing A Flexible Starting Point (7:30)
Determining How Flex Items Will Increase In Size (6:25)
Determining How Flex Items Will Shrink In Size (6:12)
Using Flex Shortcode (6:20)
Section Summary (0:41)
Quiz 4
Working With Nested Flex Containers
Section Introduction (0:38)
Getting Set Up For Nested Containers (6:41)
Wrapping Nested Child Flex-Items (3:02)
Setting Nested Child Flex-Items To Scale (2:59)
Setting Nested Child Flex-Item Display Order (9:33)
Excercise (1:35)
Exercise Solution (5:05)
Section Summary (0:28)
Quiz 5
Conclusion
Resources (3:53)
Closing Message (0:43)
Controlling Flex Item Order
Complete and Continue