Common Flexbox Layouts with Code

A horizontal navbar with logo on the left, links in the center, and a CTA button on the right.

.navbar {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  height: 64px;
  gap: 1rem;
}

.navbar-logo {
  flex-shrink: 0; /* Never compress the logo */
}

.navbar-links {
  flex: 1; /* Take all remaining space */
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.navbar-cta {
  flex-shrink: 0;
}

Why it works: flex: 1 on the links container absorbs all horizontal space between logo and button, centering the navigation links regardless of outer element widths.

Card Row with Wrapping

Equal-width cards that wrap on smaller screens.

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, minimum 300px */
  min-width: 0;    /* Allow content to truncate */
}

Why it works: flex-basis: 300px sets the minimum starting width. Items grow to fill remaining space (flex-grow: 1). When fewer than 300px of space remains, items wrap to the next line.

Media Object (Icon + Text)

An icon or avatar on the left, text content on the right. The text wraps normally while the icon stays fixed.

.media {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.media-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.media-body {
  flex: 1;
  min-width: 0; /* Allow text truncation inside */
}

Why it works: flex-shrink: 0 prevents the icon from compressing. flex: 1 lets the text body take all remaining space. min-width: 0 allows text-overflow: ellipsis to work on children.

A page layout where the footer always sticks to the bottom even when content is short.

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

.page-content {
  flex: 1; /* Expand to fill remaining space */
}

.page-footer {
  flex-shrink: 0;
}

Why it works: The column flex container stretches to the full viewport height. flex: 1 on the content area absorbs all vertical space between the header and footer, pushing the footer to the bottom.

Centered Hero Section

Perfect horizontal and vertical centering — the most iconic flexbox use case.

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

Why it works: justify-content: center centers along the main axis (horizontal by default). align-items: center centers along the cross axis (vertical). Two properties replace margin hacks and absolute positioning.

Split Layout (50/50)

Two equal columns with a divider gap.

.split {
  display: flex;
  gap: 2rem;
}

.split > * {
  flex: 1;
  min-width: 0;
}

/* Optional: different ratios */
.split-uneven > :first-child {
  flex: 2;
}

.split-uneven > :last-child {
  flex: 1;
}

Why it works: flex: 1 distributes space equally. For uneven splits, different flex-grow values set the ratio. min-width: 0 prevents content overflow in either column.

Input Group (Label + Input + Button)

A search bar with a label, text input, and submit button in a single row.

.input-group {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.input-group label {
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-right: none;
}

.input-group input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
}

.input-group button {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
}

Why it works: flex: 1 on the input makes it stretch to fill available space. flex-shrink: 0 on label and button prevents them from compressing. align-items: stretch makes all elements the same height.

A row of tags that scrolls horizontally when there are too many.

.tag-list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tag {
  flex-shrink: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: #e5e7eb;
  font-size: 0.875rem;
  white-space: nowrap;
}

Why it works: flex-shrink: 0 keeps each tag at its natural width. overflow-x: auto enables horizontal scrolling. white-space: nowrap prevents tags from breaking across lines.

A sidebar that stacks on mobile and sits beside content on wider screens.

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.sidebar {
  flex: 1 1 250px;
}

.main {
  flex: 3 1 500px;
  min-width: 0;
}

Why it works: flex-basis values set the minimum widths. The sidebar takes 1 part and main takes 3 parts of available space. On narrow screens, both items wrap to full width. No media query needed.

Key Takeaways

Navigation bars use flex: 1 to center links between fixed elements
Wrapping card rows combine flex-wrap: wrap with flex-basis values
Media objects pair flex-shrink: 0 (icon) with flex: 1 + min-width: 0 (text)
Sticky footers use column direction with flex: 1 on the content area
Horizontal scrolling uses flex-shrink: 0 + overflow-x: auto
Split layouts distribute space with flex-grow ratios

Try It Yourself

Build any of these layouts interactively with our Flexbox Generator. Adjust properties visually and copy the CSS straight into your project.

Navigation Bar