CSS Flexbox

What You’ll Learn

CSS Flexbox arranges items in a row or column with powerful alignment controls. It is the go-to layout tool for navbars, centered content, card rows, and responsive one-dimensional designs.

Introduction

The CSS Flexible Box Layout Module — commonly called Flexbox — is a layout model for arranging elements in one dimension: a row or a column. It distributes space along a main axis and aligns content along a cross axis.

What Is Flexbox?

Flexbox simplifies aligning and spacing elements inside a container, even when item sizes are unknown or dynamic. Before Flexbox, centering content vertically or building responsive navbars required hacks with floats and positioning.

Today, Flexbox is a core skill for every web developer. It works alongside CSS Grid: Flexbox for one-dimensional flows, Grid for two-dimensional layouts.

Basic Concepts

• Flex container — The parent with display: flex or display: inline-flex.
• Flex items — The direct children inside the flex container.
• Main axis — The direction items flow (row = horizontal, column = vertical).
• Cross axis — Perpendicular to the main axis.

📝 Syntax

Enable Flexbox on a container and align its children:

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

Flex Container Properties

Flex Item Properties

When to Use Flexbox

• Navigation bars — Align logo and links with space-between.
• Centering content — Perfect horizontal and vertical centering in one container.
• Card rows — Equal-height cards in a row with align-items: stretch.
• Form layouts — Label and input pairs in rows or columns.
• Sticky footers — Push footer to bottom with flex-grow on main content.

Use CSS Grid when you need both rows and columns at once. Flexbox and Grid work great together on the same page.

Examples Gallery

Practice Flexbox with basic rows, centered content, column stacks, and navigation bars.

.container {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: #f1f5f9;
}

.item {
  padding: 0.75rem 1rem;
  background: #2563eb;
  color: #fff;
}

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160px;
  background: #eff6ff;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #1e293b;
}

.links {
  display: flex;
  gap: 1rem;
}

💬 Usage Tips

• Use gap — Prefer gap over margins between flex items.
• Min-height for centering — Give the container a height so vertical centering is visible.
• Nested flex — Nav link groups often need their own display: flex.
• flex: 1 — Let one item grow to fill remaining space (great for sidebars).
• DevTools — Chrome and Firefox show flex overlay lines to debug alignment.

⚠️ Common Pitfalls

• Flex only direct children — Only immediate children become flex items.
• Confusing axes — justify-content follows the main axis; it switches when you change flex-direction.
• Forgetting container height — Vertical centering needs a defined height on the container.
• Using Flexbox for full page grids — CSS Grid is better for two-dimensional layouts.
• min-width: 0 — Flex items can overflow; add min-width: 0 on text children when needed.

♿ Accessibility

• DOM order matters — Screen readers follow HTML order, not visual order property.
• Focus order — Do not use order in ways that confuse keyboard navigation.
• Touch targets — Flex nav links still need adequate padding for mobile taps.
• Responsive wrapping — Use flex-wrap: wrap so items do not overflow on small screens.
• Semantic HTML — Use <nav> for navigation even when styled with Flexbox.

💡 Best Practices