flex-wrap

Setting how flex items wrap.

Overview

Examples

Allow items to wrap

Use flex-wrap when flex items should move onto additional lines instead of shrinking indefinitely.

<div class="flex flex-wrap gap:sm">    ...</div>

@layer theme {    :root {        --spacing-sm: .75rem    }}@layer utilities {    .flex {        display: flex    }    .flex-wrap {        flex-wrap: wrap    }    .gap\:sm {        gap: var(--spacing-sm)    }}

Keep items on one line

Use flex-nowrap for toolbars, segmented controls, and rows where wrapping would break the interaction.

<div class="flex flex-nowrap overflow-x:auto">    ...</div>

Reverse wrap direction

Use flex-wrap-reverse when new lines should stack in the opposite cross-axis direction.

<div class="flex flex-wrap-reverse">...</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="flex-nowrap flex-wrap@sm flex-nowrap@print">...</div>

Use gap-y:* as well as gap-x:* when wrapped rows need vertical spacing.