> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex Wrap

> Control whether flex items stay on one line or wrap onto new rows.

export const FlexNowrapDemo = () => {
  const blockStyle = {
    background: "#0ea5e9",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1.5rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minWidth: "10rem",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-nowrap</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexWrap: "nowrap",
    gap: "1rem",
    overflowX: "auto"
  }}>
            {Array.from({
    length: 8
  }, (_, i) => <div key={i} style={blockStyle}>{String(i + 1).padStart(2, "0")}</div>)}
          </div>
        </div>
      </div>
    </div>;
};

export const FlexWrapDemo = () => {
  const itemStyle = {
    background: "#a855f7",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "3rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-wrap</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexWrap: "wrap",
    gap: "1rem",
    width: "100%",
    minHeight: "14rem"
  }}>
            {Array.from({
    length: 8
  }, (_, i) => <div key={i} style={itemStyle}>{String(i + 1).padStart(2, "0")}</div>)}
          </div>
        </div>
      </div>
    </div>;
};

export const FlexWrapReverseDemo = () => {
  const itemStyle = {
    background: "#ec4899",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    minHeight: "3rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 1 calc((100% - 2rem) / 3)",
    boxSizing: "border-box",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex-wrap-reverse</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    flexWrap: "wrap-reverse",
    gap: "1rem",
    width: "100%",
    minHeight: "14rem"
  }}>
            {Array.from({
    length: 8
  }, (_, i) => <div key={i} style={itemStyle}>{String(i + 1).padStart(2, "0")}</div>)}
          </div>
        </div>
      </div>
    </div>;
};

## Overview

Wrap utilities decide whether flex items stay in a single row or flow onto additional lines. They are especially useful for card collections, tag lists, and horizontally scrollable rails.

| Class                | CSS                        | Behavior                   |
| -------------------- | -------------------------- | -------------------------- |
| `.flex-nowrap`       | `flex-wrap: nowrap;`       | Keep items on one line     |
| `.flex-wrap`         | `flex-wrap: wrap;`         | Let items move to new rows |
| `.flex-wrap-reverse` | `flex-wrap: wrap-reverse;` | Reverse row stacking       |

## No Wrap

`.flex-nowrap` keeps all items on a single line. Items that overflow the container will scroll horizontally. This is ideal for carousels, horizontal rails, and compact navigation.

<FlexNowrapDemo />

```html theme={null}
<div class="elementor-element flex flex-nowrap gap-4 overflow-auto">
  <div class="padding-6 background-gray-light rounded" style="width: 12rem; flex-shrink: 0;">01</div>
  <div class="padding-6 background-gray-light rounded" style="width: 12rem; flex-shrink: 0;">02</div>
  <div class="padding-6 background-gray-light rounded" style="width: 12rem; flex-shrink: 0;">03</div>
</div>
```

## Wrap

`.flex-wrap` lets items flow onto new rows when they run out of horizontal space. This is the most common wrap behavior for card grids, tag lists, and any dense row that should gracefully break.

<FlexWrapDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap gap-6">
  <div class="width-1-3"><div class="card padding-6">01</div></div>
  <div class="width-1-3"><div class="card padding-6">02</div></div>
  <div class="width-1-3"><div class="card padding-6">03</div></div>
</div>
```

## Wrap Reverse

`.flex-wrap-reverse` wraps items but reverses the stacking order of rows. New rows appear above instead of below. This is helpful when you want bottom-anchored content to push upward.

<FlexWrapReverseDemo />

```html theme={null}
<div class="elementor-element flex flex-wrap-reverse gap-4">
  <div class="width-1-3 padding-4 background-primary text-white rounded">01</div>
  <div class="width-1-3 padding-4 background-success text-white rounded">02</div>
  <div class="width-1-3 padding-4 background-error text-white rounded">03</div>
</div>
```

## Best Practices

* Use `.flex-wrap` for dense UI rows that should gracefully move onto another line.
* Use `.flex-nowrap` for carousels, rails, and compact navigation.
* Pair wrap behavior with `gap-*` so spacing stays consistent across rows.
* Use the responsive suffix system when wrapping should only change at specific breakpoints, such as `flex-wrap--on-m`.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Flex" href="/flexbox/flex">
    Start with the base flex container utility
  </Card>

  <Card title="Flex Direction" href="/flexbox/direction">
    Control row and column flow
  </Card>
</CardGroup>