🧱 Day 11: CSS Flexbox

Welcome to Day 11! Today we’ll explore Flexbox, a modern layout technique in CSS that allows you to design complex layouts with ease, including vertical and horizontal alignment, centering, and spacing between items.

---

📌 What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It's designed to distribute space dynamically and align items easily, even when their size is unknown or dynamic.

🔧 Key Flexbox Properties

• display: flex — Turns the container into a flex container
• justify-content — Align items horizontally (start, center, space-between, etc.)
• align-items — Align items vertically (start, center, stretch, etc.)
• flex-direction — Row (default) or column
• flex-wrap — Allow items to wrap to the next line

🧪 Example Layout

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-item {
  background-color: #bfdbfe;
  padding: 1rem;
  margin: 0.5rem;
}

Item 1

Item 2

Item 3

🎯 Practice Task

• Create a flex container with 3 items spaced evenly
• Change direction from row to column
• Center items both vertically and horizontally

🚀 What’s Next?

In Day 12, we’ll explore CSS Grid, another powerful layout system for two-dimensional designs.

Day 12 - CSS Grid Layout