Skip to main content Link Search Menu Expand Document Toggle dark mode Copy Code (external link)

flex-wrap

Controls whether flex items stay on a single line or wrap onto additional lines when they overflow the container. When wrapping is enabled, each line is treated as a new flex sub-container for alignment purposes.

On this page

Syntax

selector {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Values

Value Description
nowrap All items on one line; may overflow the container (default)
wrap Items wrap onto additional lines in the cross-axis direction
wrap-reverse Items wrap, but new lines appear in the opposite cross-axis direction

Notes

Interaction with align-content

When wrapping produces more than one line, align-content controls how the lines are distributed along the cross axis. align-items still controls individual item cross-axis alignment within each line.

Item sizing with wrap

When items wrap, each item’s flex-basis (or width / height if no basis is set) determines the threshold at which wrapping occurs. Setting flex-wrap: wrap alongside flex-basis: 50% produces a consistent two-column layout regardless of item count.

wrap-reverse

wrap-reverse is visually identical to wrap but subsequent lines appear on the opposite side of the container. In a row direction container, the second line appears above the first.

Examples

Two-column card grid

<style>
    .cards {
        display: flex;
        flex-wrap: wrap;
        gap: 12pt;
    }
    .card {
        flex: 0 0 calc(50% - 6pt);
        padding: 12pt;
        border: 1pt solid #e5e7eb;
        background-color: #f9fafb;
    }
</style>
<div class="cards">
    <div class="card"><h3>Card A</h3><p>Content here.</p></div>
    <div class="card"><h3>Card B</h3><p>Content here.</p></div>
    <div class="card"><h3>Card C</h3><p>Content here.</p></div>
    <div class="card"><h3>Card D</h3><p>Content here.</p></div>
</div>

Wrapping tags row

<style>
    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6pt;
    }
    .tag {
        padding: 3pt 10pt;
        background-color: #dbeafe;
        color: #1e40af;
        border: 1pt solid #93c5fd;
        font-size: 9pt;
    }
</style>
<div class="tags">
    <div class="tag">Design</div>
    <div class="tag">Development</div>
    <div class="tag">Marketing</div>
    <div class="tag">Analytics</div>
    <div class="tag">Operations</div>
</div>

See Also