flex-wrap Deep Dive — CSS

flex-wrap

flex-wrap controls whether flex items stay on one line or wrap to multiple lines. This is essential for responsive layouts that adapt to container width.

Flex Wrap Values

Value	Behavior	Wrapping
nowrap	All items one line	No (shrink items)
wrap	Multiple lines	Yes (wrap to next line)
wrap-reverse	Multiple lines reversed	Yes (reverse order)

CSS

/* No wrap - items shrink to fit */
.container {
  display: flex;
  flex-wrap: nowrap;
  width: 500px;
}

.item {
  width: 200px;
  /* Will shrink below 200px to fit in 500px */
}

/* Wrap - items wrap to new line */
.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.item {
  width: 200px;
  /* Will stay 200px and wrap to new line */
}

/* Wrap reverse */
.container {
  display: flex;
  flex-wrap: wrap-reverse;
  /* Items wrap, but lines reverse order */
}

Responsive Wrapping

CSS

/* Flexible items that wrap */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1;
  min-width: 250px;
  /* Grows to fill space, wraps when needed */
}

/* Button group that wraps */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  flex-shrink: 0;
  /* Buttons don't shrink, wrap instead */
}

/* Card layout */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card {
  width: 300px;
  /* Cards stay 300px, wrap when needed */
}

Note

flex-wrap: wrap enables responsive layouts. Items wrap to new line when needed. Combine with flex and min-width for flexible grids.

Justify content: [justify-content](/css/justify-content).