flex-wrap

Ejemplos

No ajustar

Usa flex-nowrap para evitar que los elementos flex se ajusten, causando que los elementos inflexibles desborden el contenedor si es necesario:

<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Ajustar normalmente

Usa flex-wrap para permitir que los elementos flex se ajusten:

<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Ajuste invertido

Usa flex-wrap-reverse para ajustar los elementos flex en la dirección inversa:

<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Responsive design

Prefija una utilidad flex-wrap con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.