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

flex-direction

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-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;

Examples#

Row#

Use flex-row to position flex items horizontally in the same direction as text:

{

01
02
03
}

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

Row reversed#

Use flex-row-reverse to position flex items horizontally in the opposite direction:

{

01
02
03
}

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

Column#

Use flex-col to position flex items vertically:

{

01
02
03
}

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

Column reversed#

Use flex-col-reverse to position flex items vertically in the opposite direction:

{

01
02
03
}

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

Responsive design#