#114 Difference between justify-content and align-items in CSS

✅ Difference between justify-content and align-items in CSS Flexbox:

---

🔹 justify-content

• Aligns items along the main axis (usually horizontal by default).
• It distributes space between/around flex items.
• Common values:
  • flex-start: items align to the start (left)
  • flex-end: items align to the end (right)
  • center: items are centered
  • space-between: equal spacing between items
  • space-around: equal spacing around items

Example:

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

---

🔹 align-items

• Aligns items along the cross axis (usually vertical by default).
• It controls how items align inside the container vertically.
• Common values:
  • stretch (default): items stretch to fill container
  • flex-start: items align to the top
  • flex-end: items align to the bottom
  • center: items are vertically centered

Example:

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

---

📌 Summary:

• justify-content → aligns horizontally (main axis)
• align-items → aligns vertically (cross axis)