Flexbox y Grid
Utilidades para controlar la dirección de los elementos flex.
| Clase | Estilos |
|---|---|
flex-row | flex-direction: row; |
flex-row-reverse | flex-direction: row-reverse; |
flex-col | flex-direction: column; |
flex-col-reverse | flex-direction: column-reverse; |
Utiliza flex-row para posicionar los elementos flex de forma horizontal en la misma dirección que el texto:
<div class="flex flex-row ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza flex-row-reverse para posicionar los elementos flex de forma horizontal en la dirección opuesta:
<div class="flex flex-row-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza flex-col para posicionar los elementos flex de forma vertical:
<div class="flex flex-col ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza flex-col-reverse para posicionar los elementos flex de forma vertical en la dirección opuesta:
<div class="flex flex-col-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>Antepone a la utilidad flex-direction el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="flex flex-col md:flex-row ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.