Flexbox

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout system that makes it incredibly easy to distribute space and align content in a container, even when sizes are unknown or dynamic. It's called "one-dimensional" because it deals with layout in one direction at a time—either as a row or a column.

Before Flexbox, creating certain layouts required complex hacks involving floats, positioning, and inline-blocks. Flexbox solved these problems elegantly, making tasks like centering, equal-height columns, and responsive navigation trivial.

Flex Container Basics

When you apply display: flex to an element, it becomes a flex container, and its children become flex items.

.container {
  display: flex;
  /* Items automatically line up in a row */
}

Flex Direction

Control whether items flow horizontally or vertically:

flex-direction: row;

flex-direction: column;

flex-direction: row-reverse;

flex-direction: column-reverse;

Justify Content (Main Axis Alignment)

justify-content aligns items along the main axis (horizontal for row, vertical for column). It distributes extra space.

Align Items (Cross Axis Alignment)

align-items aligns items along the cross axis (perpendicular to main axis). For row direction, this is vertical alignment.

Flex Item Properties

Control how individual items grow, shrink, and size themselves:

/* Items with flex-grow take available space */
.item-1 { flex-grow: 0; } /* No growth */
.item-2 { flex-grow: 1; } /* Takes 1 share */
.item-3 { flex-grow: 2; } /* Takes 2 shares */

.item {
  flex-shrink: 1;  /* Can shrink (default) */
  flex-shrink: 0;  /* Never shrinks */
}

flex-basis: 200px;  /* Starting size */
flex-basis: 25%;    /* Percentage */
flex-basis: auto;   /* Based on content */

/* flex: grow shrink basis */
flex: 1;              /* grow: 1, shrink: 1, basis: 0 */
flex: 0 0 200px;      /* Fixed 200px, no grow/shrink */
flex: 1 1 auto;       /* Flexible, based on content */

/* Common patterns */
.equal-width { flex: 1; }           /* All items equal */
.fixed { flex: 0 0 250px; }         /* Fixed sidebar */
.auto { flex: 1 1 auto; }           /* Flexible content */

Flex Wrap

By default, flex items try to fit on one line. Use flex-wrap to allow wrapping:

Gap Property

Modern way to add spacing between flex items (replaces margin hacks):

.container {
  display: flex;
  gap: 20px;          /* Both directions */
  row-gap: 10px;      /* Between rows */
  column-gap: 20px;   /* Between columns */
}

Real-World Patterns

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 300px; /* Min 300px, grows equally */
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1; /* Takes all available space */
}