Flexbox Simplified
Buy now
Learn more
Introduction
Welcome to the course!
My approach
Getting the most out of this course
Suggested Pacing
The software I'll be using
The Discord Community
Join the Discord Community!
The file structure
The files
Finishing online courses is hard
What happens when we declare display: flex?
Introduction to declaring display: flex
The flex container
The flex items - part 1
The flex items - part 2
The flex items - part 3
The flex items - part 4
A challenge
Flexing our muscles
Introduction to flexing our muscles
flex-direction basics
Collapsing margins
flex-direction - part 2
The order property
Time for a break
flex-grow
flex-shrink
Grow & Shrink Challenge
Grow & Shrink Solution
A note on the upcoming challenges
Another challenge
My solution
Visualizing with our dev tools
Additional reading
Understanding the basis
Introduction to flex-basis
The basics of flex-basis
A note of flex-start and flex-end
flex-basis challenge
flex-basis solution
Additional reading
Alignment and Justification
Introduction to alignment and justification
Workbook
Justification basics
Justification continued
Justification and flex-direction
align-items basics
align-items: baseline
Aligning and justifying buttons
A simple navigation - challenge
A simple navigation - solution
A simple navigation follow-up challenge/solution
A look at align-self
Why is there no justify-self?
Alignment and Justification form challenge
Alignment and Justification form solution
Additional reading and fun way to reinforce your learning
To wrap or not to wrap
flex-wrap introduction
The basics of flex-wrap
flex-wrap and flex-direction
flex-wrap challenge
flex-wrap solution
Using flex-wrap with flex-grow and flex-shrink
Layouts with flex-wrap
flex-wrap challenge #2
Solution to the challenge
The flex-flow shorthand
A look at align-content
The place-content shorthand
Break time and an interesting use case
The magic of margins
Introduction to the magic of margins
auto margins and flexbox
Fixing a floating footer
The future is here
This isn't so new anymore
Introduction to gap
the gap property
Creating a fallback for gap
Flex grow, revisited
flex-grow, revisited
Pushing flex-grow to it's limits
A use case
Time for a break
Patterns and Layouts
Introduction to patterns and layouts
Getting the most out of this module
Equal columns, every time
Content / Sidebar
Adaptable sidebar
Grid-ish
Combining layouts and patterns
The holy albatross
The end!
Could I ask you a favor?
Video Downloads
Introduction
Module 1
Module 2
Module 3
Module 4
Module 5
Module 6
Module 7
Module 8
Module 9
Products
Course
Section
Flexing our muscles
Flexing our muscles
Flexbox Simplified
Buy now
Learn more
Introduction
Welcome to the course!
My approach
Getting the most out of this course
Suggested Pacing
The software I'll be using
The Discord Community
Join the Discord Community!
The file structure
The files
Finishing online courses is hard
What happens when we declare display: flex?
Introduction to declaring display: flex
The flex container
The flex items - part 1
The flex items - part 2
The flex items - part 3
The flex items - part 4
A challenge
Flexing our muscles
Introduction to flexing our muscles
flex-direction basics
Collapsing margins
flex-direction - part 2
The order property
Time for a break
flex-grow
flex-shrink
Grow & Shrink Challenge
Grow & Shrink Solution
A note on the upcoming challenges
Another challenge
My solution
Visualizing with our dev tools
Additional reading
Understanding the basis
Introduction to flex-basis
The basics of flex-basis
A note of flex-start and flex-end
flex-basis challenge
flex-basis solution
Additional reading
Alignment and Justification
Introduction to alignment and justification
Workbook
Justification basics
Justification continued
Justification and flex-direction
align-items basics
align-items: baseline
Aligning and justifying buttons
A simple navigation - challenge
A simple navigation - solution
A simple navigation follow-up challenge/solution
A look at align-self
Why is there no justify-self?
Alignment and Justification form challenge
Alignment and Justification form solution
Additional reading and fun way to reinforce your learning
To wrap or not to wrap
flex-wrap introduction
The basics of flex-wrap
flex-wrap and flex-direction
flex-wrap challenge
flex-wrap solution
Using flex-wrap with flex-grow and flex-shrink
Layouts with flex-wrap
flex-wrap challenge #2
Solution to the challenge
The flex-flow shorthand
A look at align-content
The place-content shorthand
Break time and an interesting use case
The magic of margins
Introduction to the magic of margins
auto margins and flexbox
Fixing a floating footer
The future is here
This isn't so new anymore
Introduction to gap
the gap property
Creating a fallback for gap
Flex grow, revisited
flex-grow, revisited
Pushing flex-grow to it's limits
A use case
Time for a break
Patterns and Layouts
Introduction to patterns and layouts
Getting the most out of this module
Equal columns, every time
Content / Sidebar
Adaptable sidebar
Grid-ish
Combining layouts and patterns
The holy albatross
The end!
Could I ask you a favor?
Video Downloads
Introduction
Module 1
Module 2
Module 3
Module 4
Module 5
Module 6
Module 7
Module 8
Module 9
15 Lessons
Introduction to flexing our muscles
flex-direction basics
Collapsing margins
flex-direction - part 2
The order property
Time for a break
flex-grow
flex-shrink
Grow & Shrink Challenge
Grow & Shrink Solution
A note on the upcoming challenges
Another challenge
My solution
Visualizing with our dev tools
Additional reading