Master CSS Flexbox through a comprehensive 20-video course covering essential concepts and practical applications. Learn flex-direction, wrapping, ordering, alignment, and centering techniques. Explore sizing with flex properties, cross-browser support, and Autoprefixer usage. Apply Flexbox to real-world scenarios like navigation menus, pricing grids, and mobile app layouts. Gain hands-on experience with code-along sessions and discover how to create responsive designs, equal-height columns, and efficient form layouts using Flexbox.
Overview
Syllabus
- Introduction to What The FlexBox
- Introduction to Flexbox
- Working with Flexbox flex-direction
- Wrapping elements with Flexbox
- Flexbox Ordering
- Flexbox Alignment and Centering with justify-content
- Alignment and Centering with align-items
- Alignment and Centering with align-content
- Alignment and Centering with align-self
- Understanding Flexbox sizing with the flex property
- Finally understanding Flexbox flex-grow, flex-shrink and flex-basis
- How Flexbox's flex-basis and wrapping work together
- Cross Browser Flexbox Support and Autoprefixer!
- Pure Flexbox navigation code along
- Mobile content reordering with Flexbox
- Nesting Flexbox for vertical and horizontal centering with Flexbox
- Flexbox Pricing Grid
- Flexbox Equal height columns and leftover elements
- Flexbox single line form
- Create a mobile app layout with Flexbox
Taught by
Wes Bos
