Flexbox y Grid
Utilidades para controlar cómo se envuelven (wrap) los elementos flex.
| Clase | Estilos |
|---|---|
flex-nowrap | flex-wrap: nowrap; |
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
Utiliza flex-nowrap para evitar que los elementos flex se envuelvan, haciendo que los elementos no flexibles se desborden del contenedor si es necesario:
<div class="flex flex-nowrap"> <div>01</div> <div>02</div> <div>03</div></div>Utiliza flex-wrap para permitir que los elementos flex se envuelvan:
<div class="flex flex-wrap"> <div>01</div> <div>02</div> <div>03</div></div>Utiliza flex-wrap-reverse para envolver los elementos flex en la dirección opuesta:
<div class="flex flex-wrap-reverse"> <div>01</div> <div>02</div> <div>03</div></div>Antepone a la utilidad flex-wrap 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-wrap md:flex-wrap-reverse ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.