Flexbox Layout

Flex Container Setup

Flexbox arranges children along a main axis and a cross axis. Set display: flex on the container to activate flex layout. Flex-direction controls the main axis direction — row (horizontal) or column (vertical).

Flex-wrap allows items to wrap to new lines when they exceed container width. Most real-world layouts use flex-wrap: wrap combined with responsive flex-basis values.

• Use gap instead of margin hacks for spacing between flex items
• flex-direction: column is ideal for card and sidebar layouts
• Flex containers only affect direct children

.toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

Flex Item Properties

Flex items can grow, shrink, and set a base size. Flex-grow distributes extra space proportionally. Flex-shrink controls how items compress when space is tight. Flex-basis sets the initial size before grow/shrink calculations.

The flex shorthand combines all three: flex: 1 means flex: 1 1 0%, making items grow equally from a zero base. Use flex: 0 0 auto to prevent an item from growing or shrinking.

.sidebar { flex: 0 0 260px; }
.main   { flex: 1 1 0%; min-width: 0; }
.tag    { flex: 0 0 auto; }

Alignment

Justify-content aligns items along the main axis — use space-between for toolbars, center for hero sections, and flex-end for right-aligned actions. Align-items controls cross-axis alignment.

Align-self overrides alignment for a single item. For multi-line flex containers, align-content distributes space between wrapped lines.

• margin-left: auto pushes a flex item to the far end
• align-items: stretch is the default — set align-items: center for mixed heights
• Use margin-top: auto to pin footer actions to the bottom of a flex card

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

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
}

Common Flexbox Patterns

Flexbox excels at navigation bars, card layouts, centered modals, and holy-grail page structures. A column flex container with flex: 1 on the main content area creates sticky footers without calc() hacks.

When combining flex with text truncation, always set min-width: 0 on flex children. Without it, flex items refuse to shrink below their content width and overflow breaks.

.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.page-main { flex: 1; }
.page-footer { flex-shrink: 0; }

Flexbox vs Grid

Flexbox is one-dimensional — it handles either rows or columns well. CSS Grid is two-dimensional and better for full page layouts. Use Flexbox for component internals (toolbars, media objects, tags) and Grid for page-level structure.

Many layouts combine both: a Grid page with Flexbox cards inside each cell is a common and effective pattern.

.media-object {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.media-object img {
  flex: 0 0 64px;
  border-radius: 50%;
}