Dive deep into the complexities of CSS Flexbox in this comprehensive 23-minute video tutorial. Explore the intricacies of how Flexbox calculates element sizes, including the nuances of flex-shrink and flex-grow. Understand the true meaning of flex: 1 and why it doesn't always result in even columns. Discover why flex-basis: 100% produces different outcomes compared to flex: 1. Learn about new preferred solutions for creating equal columns and compare Flexbox with Grid. Gain practical insights through multiple CodePen examples and benefit from timestamps for easy navigation through specific topics.
Overview
Syllabus
- Introduction
- How flexbox calculates the size of elements
- How flex-shrink calculates how much to shrink by
- How flex-grow calculates the size to grow by
- What flex: 1 actually does
- Why flex: 1 on all the flex items doesn't make even columns all the time
- Why flex-basis: 100% doesn't have the same result as flex: 1
- My new preferred solution
- A solution using flexbox
- Flexbox vs Grid
Taught by
Kevin Powell
