flex-direction

Ejemplos

Fila

Usa flex-row para posicionar elementos flex horizontalmente en la misma dirección que el texto:

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

Fila invertida

Usa flex-row-reverse para posicionar elementos flex horizontalmente en la dirección opuesta:

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

Columna

Usa flex-col para posicionar elementos flex verticalmente:

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

Columna invertida

Usa flex-col-reverse para posicionar elementos flex verticalmente en la dirección opuesta:

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

Responsive design

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

<div class="flex flex-col md:flex-row ...">
  <!-- ... -->
</div>

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