# Flex layouts wrap appropriately on narrow screens
- **Pattern:** `ab-001923` (`mobile-responsiveness.layout.flex-wrap`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001923
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001923)
## Why it matters
A flex container with six nav items and the default `flex-wrap: nowrap` will push items off-screen on a 320px phone, or shrink them until labels overlap. Card grids that refuse to wrap force horizontal scroll within the grid itself, hiding half the cards. `nowrap` is the default — every flex container holding three or more items needs an explicit decision about what happens at narrow widths, and the default is almost always wrong.
## Severity rationale
Low because most sites layer `flex-wrap` on critical layouts, so this tends to affect secondary surfaces like nav bars.
## Remediation
Add `flex-wrap: wrap` to flex containers with three or more children, or change flex direction on mobile with `flex-col sm:flex-row`. Use `flex: 1 1 280px` on children so they grow to fill the row but drop to the next line when they can't fit.
```html
...
```
## Detection
- **ID:** `flex-wrap`
- **Severity:** `low`
- **What to look for:** Check flex container declarations. Look for `display: flex` without `flex-wrap: wrap` on containers holding multiple items that would overflow on narrow screens. In Tailwind, check for `flex` without `flex-wrap` (which defaults to `nowrap`). Identify flex containers holding navigation items, card grids, or horizontally-arranged elements.
- **Pass criteria:** Count all flex containers (`display: flex` or Tailwind `flex`) that hold 3 or more child items. For each, verify it uses `flex-wrap: wrap` (Tailwind `flex-wrap`), or has a responsive breakpoint that changes layout direction on mobile (e.g., `flex-col sm:flex-row`). No more than 0 multi-item flex containers may lack a wrap or direction-change strategy. Do NOT pass when any flex container with 3 or more items uses the default `nowrap` without a mobile breakpoint override.
- **Fail criteria:** At least 1 flex container without `flex-wrap: wrap` holds 3 or more items that cannot fit in a 320px-wide viewport and has no mobile breakpoint override.
- **Skip (N/A) when:** Never.
- **Detail on fail:** `"Navigation flex container has flex-wrap: nowrap with 6 items — 1 of 4 flex containers will overflow on phone widths below 320px"`.
- **Remediation:**
```css
.card-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 280px; }
```
In Tailwind:
```html
...
```
For navigation, switch direction on mobile:
```html