flex-wrap

Definition

The flex-wrap CSS property is used in flexbox layouts to control whether flex items should wrap onto multiple lines when there isn’t enough space along the main axis. It determines whether flex items should stay in a single line (the default behavior) or wrap onto additional lines as needed. The flex-wrap property accepts values like nowrap, wrap, and wrap-reverse.

For example, flex-wrap: wrap; will allow flex items to wrap onto multiple lines if necessary, creating a responsive layout that adapts to different screen sizes. The flex-wrap property is essential for controlling the wrapping behavior of flex items within a flex container.

Syntax

.pill-list {
  display: flex;
  flex-wrap: wrap;
}

Values

• nowrap (default), wrap, wrap-reverse.

Practical Examples

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;

Allow flex items to wrap onto multiple lines when they can’t fit on one row.

<div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="display:flex; flex-wrap: wrap; gap:0.75rem;">
  <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">UI</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">Accessibility</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">Performance</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">Tooling</span>
  <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">DevOps</span>
</div>

Tips & Best Practices

• Use wrap with min-width flex items to build responsive grids.
• wrap-reverse stacks rows from bottom to top—handy for chat bubbles.

Accessibility & UX Notes

Wrapping prevents horizontal scrolling on small screens.

Browser Support

Modern browsers fully support wrapping; IE11 requires vendor prefixes.

Related

• flex-flow shorthand.
• align-content to distribute wrapped rows.