12 Essential Flexbox Layout Patterns

Why Patterns Matter

Learning Flexbox properties in isolation is like learning vocabulary without grammar. The real skill is combining display: flex with the right alignment, direction, and wrapping properties to solve recurring layout problems. These 12 patterns cover the layouts you build most often.

1. Horizontal Navigation Bar

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-spacer {
  flex: 1; /* Pushes everything after to the right */
}

Place a spacer element between the logo and menu items. flex: 1 makes it consume all free space, pushing subsequent items to the far right.

2. Centered Hero Section

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

Column direction stacks heading, subtext, and button vertically. Both alignment properties center the group.

3. Card Row

.card-row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.card-row > * {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

Fixed-width cards with horizontal scroll and snap. Ideal for product carousels on mobile.

4. Equal-Height Card Grid

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card-grid > * {
  flex: 1 1 300px; /* Grow, shrink, min 300px */
}

Cards grow to fill the row equally. On narrow screens, they wrap to single column. No media queries needed.

5. Sticky Footer

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

.page-content {
  flex: 1; /* Pushes footer to the bottom */
}

Content expands to fill available space, keeping the footer at the viewport bottom even when content is short.

6. Holy Grail Layout

.holy-grail {
  display: flex;
  flex-wrap: wrap;
}

.holy-grail > nav    { flex: 1 1 200px; }
.holy-grail > main   { flex: 3 1 400px; }
.holy-grail > aside  { flex: 1 1 200px; }

On wide screens, the three columns sit side-by-side with main taking triple the space. On narrow screens, they stack naturally via wrapping.

7. Media Object

.media {
  display: flex;
  gap: 16px;
}

.media-body {
  flex: 1; /* Text takes remaining space */
}

Avatar on the left, content on the right. The content area grows to fill available width while the image stays fixed.

8. Input Group

.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
  border-radius: 0;
}

.input-group button {
  flex-shrink: 0;
}

Text input stretches to fill space. Button stays at its natural width. Remove individual border-radii and apply them to the group container instead.

9. Tag List

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Tags flow horizontally and wrap to new lines. Simple and endlessly reusable for filters, labels, and skill lists.

10. Sidebar + Content

.layout {
  display: flex;
  gap: 32px;
}

.sidebar {
  flex: 0 0 260px;
}

.content {
  flex: 1;
  min-width: 0; /* Prevent overflow from long text */
}

Fixed sidebar width, fluid content. min-width: 0 on content prevents flex items from overflowing their container with long unbroken text.

11. Stacked Form

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row > * {
  flex: 1;
}

Vertical stack for the overall form, horizontal split for inline fields (first name + last name).

12. Modal Overlay

.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  flex: 0 1 500px; /* Max 500px, shrinks on small screens */
}

The overlay fills the viewport and centers the modal. The modal caps at 500px but shrinks gracefully on narrow viewports.

Quick Reference Table

Key Takeaways

• flex: 1 spacers solve the "push items right" problem in navigation bars.
• Equal-height cards come free with Flexbox — no height hacks needed.
• flex-wrap: wrap plus flex: 1 1 Npx builds responsive grids without media queries.
• Always add min-width: 0 on flex children that contain long text to prevent overflow.
• Sticky footer is trivial with column direction and flex: 1 on the content area.
• These patterns compose — combine sidebar + content with sticky footer for a full page layout.

Try It Yourself

Build and customize any of these layouts interactively with the Flexbox Generator.