Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

flex-wrap

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
flex-nowrap flex-wrap: nowrap;
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;

Examples#

Don't wrap#

Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

{ 

  <div className="col-start-1 row-start-1 flex flex-nowrap gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
    <div className="w-2/5 flex-none last:pr-8">
      <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">01</div>
    </div>
    <div className="w-2/5 flex-none last:pr-8">
      <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
    </div>
    <div className="w-2/5 flex-none last:pr-8">
      <div className="flex w-full items-center justify-center rounded-lg bg-sky-500 p-4">03</div>
    </div>
  </div>
</div>

}

<!-- [!code classes:flex-nowrap] -->
<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Wrap normally#

Use flex-wrap to allow flex items to wrap:

{ 

  <div className="col-start-1 row-start-1 flex flex-wrap gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
    <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
    <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
    <div className="flex w-2/5 items-center justify-center rounded-lg bg-indigo-500 p-4">03</div>
  </div>
</div>

}

<!-- [!code classes:flex-wrap] -->
<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Wrap reversed#

Use flex-wrap-reverse to wrap flex items in the reverse direction:

{ 

  <div className="col-start-1 row-start-1 flex flex-wrap-reverse gap-4 rounded-lg font-mono text-sm/6 font-bold text-white">
    <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">01</div>
    <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">02</div>
    <div className="flex w-2/5 items-center justify-center rounded-lg bg-fuchsia-500 p-4">03</div>
  </div>
</div>

}

<!-- [!code classes:flex-wrap-reverse] -->
<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Responsive design#