What is Flexbox?

Flexbox is a one‑dimensional layout model introduced in CSS3 that allows items inside a container to be automatically arranged along a main axis (horizontal or vertical) and a cross‑axis. It solves many classic layout problems—centering, equal‑height columns, reordering—without the hacks of floats, tables or absolute positioning.

• One‑dimensional: Works on a single axis at a time (row or column).
• Container‑driven: The parent element (display: flex or display: inline‑flex) defines the layout behaviour for its children.
• Responsive by design: Items adapt to the available space, shrinking, growing, or wrapping automatically.

Core Flexbox Properties

Hands‑On CSS Examples

Below are three common UI patterns built with pure Flexbox. Copy the CSS and HTML into a sandbox (e.g., CodePen) to see them in action.

1️⃣ Centering Anything (Both Axis)

.centered {
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertical */
  height: 200px;
  background: #f0f4f8;
}

<div class="centered">
  <span>I am perfectly centered!</span>
</div>

2️⃣ Responsive Navigation Bar

.nav {
  display: flex;
  flex-wrap: wrap;                /* wrap on small screens */
  justify-content: space-between;
  background: #2c3e50;
  padding: 0.5rem 1rem;
}
.nav a {
  color: #ecf0f1;
  padding: 0.5rem 1rem;
  text-decoration: none;
}
/* Collapse to vertical stack on < 600px */
@media (max-width: 599px) {
  .nav { flex-direction: column; }
}

<nav class="nav">
  <a href="#">Home</a>
  <a href="#">Products</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

3️⃣ Equal‑Height Card Grid (with wrapping)

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;                     /* modern spacing */
}
.card {
  flex: 1 1 calc(33.333% - 1rem); /* three columns */
  background: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  .card { flex-basis: calc(50% - 1rem); }
}
@media (max-width: 480px) {
  .card { flex-basis: 100%; }
}

<section class="card-grid">
  <article class="card">…</article>
  <article class="card">…</article>
  <article class="card">…</article>
  <!-- more cards -->
</section>

Flexbox vs. CSS Grid: When to Use Which?

Rule of thumb: Start with Flexbox for UI components; switch to Grid when you need a full page matrix.

Best Practices, Performance & Accessibility

⚡ Performance tips

• Prefer flex: 1 over separate flex-grow/shrink/basis for readability.
• Avoid deep nesting of flex containers when possible; each container incurs layout recalculation.
• Use gap (supported in modern browsers) instead of margin hacks – reduces re‑flow.

🔐 Accessibility considerations

• Don’t rely on visual order only; assistive technologies follow DOM order. Use order sparingly.
• Maintain a logical reading order – especially for navigation menus.

🛠️ Debugging Flexbox

Modern browsers ship a Flexbox inspector (Chrome DevTools → Elements → Layout). Key tips:

• Hover over the container to see main‑axis direction and wrap status.
• Toggle justify-content and align-items live to see immediate impact.
• Check computed flex-basis and min‑width/height to spot unexpected shrinkage.