Lesson: Flexbox Layout

🔍 What is Flexbox?

Flexbox makes it easier to design flexible, responsive layout structures without using float or positioning.

📐 Key Properties

• display: flex - Enables flex context
• flex-direction - Direction of items (row, column)
• justify-content - Main axis alignment (center, space-between)
• align-items - Cross axis alignment (center, stretch)
• flex-wrap - Wrap items to next line
• flex-grow, flex-shrink, flex-basis - Item sizing

🧪 Example 1: Basic Flex Row

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: lightgray;
  padding: 20px;
}
.item {
  background: blue;
  color: white;
  padding: 20px;
}

🧪 Example 2: Column Layout

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

🧪 Example 3: Wrap & Responsive

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.item {
  flex: 1 1 200px;
}

📌 Use Cases

• Navigation Bars
• Card Layouts
• Centering Content
• Simple Responsive Rows

🚀 Try It Yourself!