Flexbox Patterns

The flex shorthand combines three properties that control how flex items share space:

flex-basis sets the initial size of a flex item before growing or shrinking occurs. It behaves like width (in a row) or height (in a column), but is Flexbox-aware. A value of 0 means the item starts with no size and grows purely based on flex-grow. A value of auto means the item uses its content size or explicit width/height as its starting point.

flex-grow determines how much of the remaining space an item should absorb. If three items have flex-grow: 1, they split extra space equally. If one has flex-grow: 2, it gets twice as much extra space as the others.

flex-shrink determines how much an item should shrink when there is not enough space. A value of 0 prevents shrinking entirely; the item keeps its flex-basis size even if it causes overflow.

/* Equal-width items */
.item { flex: 1 1 0; }

/* Fixed sidebar + fluid main */
.sidebar { flex: 0 0 250px; }
.main    { flex: 1 1 0; }

The holy grail layout is a classic web design pattern with a header, footer, and three columns (left sidebar, main content, right sidebar). It was notoriously difficult to achieve with floats, but Flexbox makes it straightforward.

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.middle {
  display: flex;
  flex: 1;
}

.left-sidebar  { flex: 0 0 200px; }
.main-content  { flex: 1; }
.right-sidebar { flex: 0 0 200px; }

The outer container uses flex-direction: column to stack header, middle, and footer vertically. The middle section is itself a flex container (in the default row direction) with the main content set to flex: 1 so it fills all available horizontal space.

This pattern also naturally produces a sticky footer because flex: 1 on the middle section pushes the footer to the bottom of the viewport when content is short.