Understanding Flexbox Alignment - Main and Cross Axis Explained

Overview

Dive into a 14-minute video tutorial that demystifies flexbox alignment in CSS. Learn the key differences between justify-content and align-items, and discover why justify-self isn't available in flexbox. Explore practical tricks for remembering these properties and gain a deeper understanding of their functionality. Use browser developer tools to experiment with various flexbox options, understand the concepts of main and cross-axis, and learn how flex-direction affects alignment. Discover the relationship between align-content and flex-wrap, and find out how to use margins as a workaround for justify-self. Perfect for web developers looking to enhance their CSS layout skills and create more flexible, responsive designs.

Syllabus

- Introduction
- Using your devtools to play with different options
- The main and cross-axis
- The main axis has to focus on groups of content and the cross axis on individual items
- Changing the flex-direction
- align-content and flex-wrap
- You can use margins when you want justify-self