Q10: What is the difference between justify-content, align-items, and align-content?
justify-content: Aligns flex items along the main axis.align-items: Aligns flex items along the cross axis within a single line.align-content: Distributes multi-line flex tracks along the cross axis whenflex-wrap: wrapis enabled.
Centering with Flexbox Alignment
.center-box {
display: flex;
justify-content: center; /* Main axis center */
align-items: center; /* Cross axis center */
height: 100vh;
}💡 Combines justify-content and align-items to center content vertically and horizontally.
Key Takeaways
justify-contentmanages main-axis distribution.align-itemsaligns individual items inside flex lines on cross axis.align-contenttargets track spacing across wrapped multi-line containers.
Knowledge Check
Which Flexbox property distributes wrapped track rows along the cross axis?