Common Flexbox Layout Patterns

Pattern 1: A Navigation Bar with a Spacer

.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.navbar .spacer {
  flex: 1; /* pushes everything after it to the right */
}

A single empty element with flex: 1 is a common trick to split a navbar into a left-aligned group and a right-aligned group without extra positioning.

Pattern 2: Equal-Width Columns

.columns {
  display: flex;
  gap: 20px;
}
.columns > * {
  flex: 1; /* every child takes equal share of the width */
}

Pattern 3: A Sticky Footer Layout

html, body { height: 100%; }
.page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.content { flex: 1; } /* pushes footer down even on short pages */

By making .content grow to fill any leftover vertical space, the footer stays at the bottom of the viewport on short pages, but still gets pushed down naturally on long pages instead of overlapping content.

Pattern 4: Wrapping Card Grid

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 250px; /* grow, shrink, but never smaller than ~250px */
}

flex-wrap: wrap lets items drop to a new line once they no longer fit, turning a single flex row into a simple responsive card grid without any media queries.

Pattern 5: Centered Button Group

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}