Flexbox

A CSS layout module that provides an efficient way to arrange, align, and distribute space among items in a container, even when their size is unknown or dynamic.

Overview

Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces. It makes it easier to design flexible responsive layout structures without using float or positioning.

Example

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

.item {
  flex: 1;
}

Key Points

  • One-dimensional layout (row or column)
  • Main axis and cross axis alignment controls
  • Items can grow, shrink, and be reordered
  • Perfect for navigation bars, cards, and component layouts
  • Works in all modern browsers

Learn More