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 overflow-x:auto flex-nowrap">  ...</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-nowrap@print flex-wrap@sm">...</div>

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