Responsive Flexbox Layouts — flex-wrap, flex-basis, and Media Queries

Responsive Flexbox layouts use flex-wrap, flex-basis, and flex-grow to create layouts that adapt to screen size — often without a single media query.

Use the Flexbox Generator to visualize flex properties interactively.

flex-wrap

/* Default: nowrap — items shrink to fit one line */
.container { display: flex; flex-wrap: nowrap; }

/* Wrap: items move to next line when they can't fit */
.container { display: flex; flex-wrap: wrap; }

/* Wrap-reverse: items wrap to previous line */
.container { display: flex; flex-wrap: wrap-reverse; }

flex shorthand: grow, shrink, basis

/* flex: [flex-grow] [flex-shrink] [flex-basis] */

.item { flex: 1; }
/* = flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
/* Item grows to fill space, shrinks when needed */

.item { flex: auto; }
/* = flex-grow: 1; flex-shrink: 1; flex-basis: auto */
/* Grows and shrinks, uses item's natural size as base */

.item { flex: none; }
/* = flex-grow: 0; flex-shrink: 0; flex-basis: auto */
/* Fixed size, no growing or shrinking */

.item { flex: 0 0 300px; }
/* Fixed 300px, no growing or shrinking */

Responsive card grid without media queries

/* Cards that go multi-column on wide screens automatically: */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  /* Grow to fill space, but don't shrink below 280px */
  flex: 1 1 280px;
  /* 1 = can grow
     1 = can shrink
     280px = minimum width before wrapping */
}

/* How it works:
   - On mobile (320px): one card per row
   - On tablet (640px): two cards per row
   - On desktop (900px): three cards per row
   No @media queries needed! */

flex-basis sets minimum width

/* flex-basis is the starting size before growing/shrinking */

/* Good responsive pattern: */
.item {
  flex: 1 1 320px;  /* Will wrap when can't fit 320px */
}

/* Using min-width instead: */
.item {
  flex: 1 1 auto;
  min-width: 280px;  /* Different approach, same idea */
}

/* Using clamp for fluid sizes: */
.item {
  flex: 1 1 clamp(200px, 30%, 400px);
}

Sidebar + main layout

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

.sidebar {
  flex: 0 0 280px;  /* Fixed sidebar width */
}

.main {
  flex: 1 1 300px;  /* Grows, min 300px before wrap */
}

/* When total < 280+300+gap = 604px, sidebar wraps below main */
/* Result: sidebar is below content on mobile — no @media needed */

/* To reverse order (sidebar first on mobile): */
.sidebar { order: 2; }
.main    { order: 1; }
@media (min-width: 640px) {
  .sidebar { order: initial; }
  .main    { order: initial; }
}

Responsive navigation

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
}

.nav-logo {
  flex: 0 0 auto;  /* Fixed size, don't shrink */
  margin-right: auto;  /* Pushes everything else right */
}

.nav-link {
  flex: 0 0 auto;
}

/* On very small screens, nav items wrap: */
@media (max-width: 480px) {
  .nav-logo { flex: 0 0 100%; }  /* Logo takes full width */
  .nav-link { flex: 1; text-align: center; }
}

grow ratio — proportional sizing

/* flex-grow ratio controls how much extra space each item gets: */
.container { display: flex; }
.item-1 { flex-grow: 1; }  /* Gets 1/4 of available space */
.item-2 { flex-grow: 2; }  /* Gets 2/4 (twice as much) */
.item-3 { flex-grow: 1; }  /* Gets 1/4 of available space */

/* Useful for: content area gets 2x space of sidebar */
.sidebar { flex: 1; }  /* 1/3 */
.main    { flex: 2; }  /* 2/3 */

Prevent items from over-shrinking

/* By default, flex items can shrink to zero width */
/* Prevent it with min-width: 0 (to enable ellipsis) or flex-shrink: 0 */

.tag {
  flex-shrink: 0;  /* Never shrink */
  white-space: nowrap;
}

/* Allow text to truncate instead of item shrinking: */
.text-item {
  min-width: 0;  /* Override implicit min-width: auto */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Related tools

• Flexbox Generator — design flexbox layouts visually
• Flexbox Alignment Guide — justify-content, align-items
• Flexbox Layout Patterns — sticky footer, sidebar, navbar