🧩 CSS COURSE – MODULE 8: FLEXBOX

📁 File: flexbox.md

🧩 Flexbox (Flexible Box Layout)

📌 Introduction

Flexbox is a modern CSS layout system used to arrange elements easily.

👉 It helps you:

• align items horizontally or vertically
• distribute space
• center elements easily
• build responsive layouts

🧠 1. Flex Container

To use Flexbox, you start with a container:

.container {
  display: flex;
}

✔ This activates flex behavior

📦 2. Flex Direction

.container {
  display: flex;
  flex-direction: row;
}

Values:

• row → left to right (default)
• column → top to bottom
• row-reverse
• column-reverse

📏 3. Justify Content (MAIN AXIS)

.container {
  justify-content: center;
}

Controls horizontal alignment:

📐 4. Align Items (CROSS AXIS)

.container {
  align-items: center;
}

Controls vertical alignment:

🔁 5. Flex Wrap

.container {
  flex-wrap: wrap;
}

Behavior:

• Items move to next line if needed

⚡ 6. Gap (Spacing)

.container {
  gap: 20px;
}

✔ Replaces margin hacks ✔ Cleaner spacing system

🧠 7. Flex Items

Each child inside flex container is a flex item.

.item {
  flex: 1;
}

Meaning:

• takes equal space

📊 8. Flex Grow / Shrink

.item {
  flex-grow: 1;
  flex-shrink: 1;
}

Meaning:

• grow → expand
• shrink → reduce size

🧩 Real Example

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 200px;
}

.box {
  background: blue;
  color: white;
  padding: 20px;
}

🎯 Center Anything (VERY IMPORTANT)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

✔ This centers anything perfectly (horizontally + vertically)

⚠️ Common Mistakes

• Forgetting display: flex ❌
• Mixing flex with float ❌
• Not understanding axes ❌
• Overusing margins instead of gap ❌

🧠 Flexbox Mental Model

Main Axis → justify-content
Cross Axis → align-items

🧪 Mini Exercise

Create:

1. A navbar using flexbox
2. Center a box perfectly
3. A row of 3 cards with spacing
4. A column layout with flex-direction