Flex Responsive

Flex Responsive

Flexbox is naturally responsive when you combine flexible sizing (flex) with wrapping (flex-wrap). This makes it great for card grids, galleries, and toolbars.

The most common responsive pattern is:

• display: flex
• flex-wrap: wrap
• gap for spacing
• flex: 1 1 240px on items (responsive cards)

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.row .card {
  flex: 1 1 260px;
}

As the screen gets smaller, cards wrap to fewer columns automatically.

Responsive Navigation (Wrap + Alignment)

For toolbars and nav rows, wrapping prevents overflow. You can also change alignment on smaller screens.

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.toolbar .left,
.toolbar .right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

Equal Height Cards

Flex items in the same row can be made equal height by allowing them to stretch on the cross axis.

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.card {
  flex: 1 1 260px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 14px;
}

Prevent Shrinking for Fixed Items

In responsive headers, you might want icons or buttons to keep their size. Use flex-shrink: 0.

.logo,
.icon {
  flex-shrink: 0;
}

Breakpoints with Media Queries

Flexbox can handle many layouts without breakpoints, but media queries are useful when you want strict column counts or layout switches.

Example: force 1 / 2 / 3 columns:

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

.grid .card {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .grid .card {
    flex: 1 1 calc(50% - 14px);
  }
}

@media (min-width: 992px) {
  .grid .card {
    flex: 1 1 calc(33.333% - 14px);
  }
}

Tip: When using calc() with gaps, make sure the subtraction matches the gap value so cards align nicely.

Summary

• Use flex-wrap: wrap + flex: 1 1 ... for responsive card layouts.
• gap provides clean spacing without margins.
• Use flex-shrink: 0 for elements that must keep their size.
• Add media queries only when you need strict breakpoint control.