🎯 Learning Objectives

By the end of this lesson, students will understand:

• What Flexbox is and why it’s used
• The difference between main axis and cross axis
• How to use display: flex and control direction
• How to align items with Flexbox (justify-content, align-items, align-content)
• How flex sizing works (flex-grow, flex-shrink, flex-basis, flex)
• How wrapping works (flex-wrap)
• How spacing works (gap)
• How ordering items works (order)
• Real-world Flexbox layout patterns

1️⃣ What Is Flexbox?

Flexbox (Flexible Box Layout) is a layout system built to make:

• centering

• aligning

• distributing space

• building responsive layouts

  easy, consistent, and predictable.

It’s perfect for one-dimensional layouts (rows OR columns).