Flexbox

Una práctica que estuve haciendo con tailwind:
En cel

En tablet

1. Pagina de Tailwind
   https://play.tailwindcss.com/

2)Guia para Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1. Documentancion para Grid
   https://css-tricks.com/snippets/css/complete-guide-grid/

2. Juego para aprender Flexbox
   https://flexboxfroggy.com/#es

Flexbox es un modelo de layout que funciona principalmente respecto a un eje X y un eje Y.

Controlando todo de manera unidimensional, esto se traduce al uso de una fila o columna.

Al usar la palabra flex dentro de una clase, por defecto será flexbox en dirección de fila (row), para cambiar la dirección a columna se usa flex-col.

El layout de Grid funciona como una cuadricula compuesta de filas y columnas, la cual nos permite dividir nuestra página en áreas o secciones.

Ejemplo practico:

<div class="w-96 h-96 bg-sky-200 p-10 m-20 flex flex-col space-y-4 justify-center items-center">
  <div class="w-16 h-16 bg-gray-400"></div>
  <div class="w-16 h-16 bg-gray-400"></div>
  <div class="w-16 h-16 bg-gray-400"></div>
  <div class="w-16 h-16 bg-gray-400"></div>
</div>

Más información de Flex y Grid en la documentación oficial del framework: https://tailwindcss.com/docs/flex

Cuando cambiamos el flexbox a column, el justify-content modifica el layout verticalmente y el align-items horizontalmente.
.
Estas dos propiedades como que se invierten

Si aún no dominas Flex, esta es la mejor guía que he conocido: https://flexboxfroggy.com/#es

Me encantó tailwind por las siguentes razones:

• facil de personalizar
• muy intuitivo si venis de css, esto hace que practicamente escribas css en tu html, ayudando a generar un código mucho mas fácil de mantener, porque evitas todos tus archivos css que dejan de existir.

Un diseño bastante cutre pero solo para hacer las pruebas iniciales con flex y tratar de acomodar unos elementos básicos
En móvil

En dispositivo md

Con flex-wrap

Al haer hover se redondean los divs impares

<div class="w-96 h-96 bg-slate-300 p-10 mx-auto my-40 flex flex-col space-y-4 flex-wrap group">
  <div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
  <div class="w-16 h-16 bg-red-400"></div>
  <div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
  <div class="w-16 h-16 bg-red-400"></div>
  <div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
  <div class="w-16 h-16 bg-red-400"></div>
  <div class="w-16 h-16 bg-red-400 group-hover:rounded-full"></div>
</div>
 

Haciendo algunas pruebas con flex:

<div class="flex space-x-3 justify-center">
        <div class="w-32 h-32 bg-blue-200"></div>
        <div class="w-32 h-32 bg-blue-300"></div>
        <div class="w-32 h-32 bg-blue-400"></div>
        <div class="w-32 h-32 bg-blue-500"></div>
    </div>

    <div class="flex flex-col space-y-3 items-end">
        <div class="w-32 h-32 bg-red-200"></div>
        <div class="w-32 h-32 bg-red-300"></div>
        <div class="w-32 h-32 bg-red-400"></div>
        <div class="w-32 h-32 bg-red-500"></div>
    </div>

📝 Mis apuntes:

.
Flexbox es un modelo de Layout que funciona principalmente respecto a un je X y un eje Y. Controlando todo de manera unidimensional, esto se traduce al uso de una fila o columna.
.
Cuando nosotros utilizamos dentro de Tailwind la palabra reservada flex vamos a tener por defecto que se ordenen nuestros elementos en fila, esto quiere decir que van a estar uno tras otro, pero también tenemos la opción de trabajarlo en columna.
.
Grid funciona como una cuadrícula compuesta de filas y columnas, la cual nos permite dividir nuestra página en áreas o secciones.

Me encanta tailwind, me encanta su sintaxis, se me hace muy declarativa. Sin embargo, no me gustaria llenar mis elementos de html con tantas clases, yo por esa razón estoy fuera

Tener presente que al cambiar el comportamiento default de flexbox de row a column, también cambian las propiedades de justify y items. Para justify con direction row si centra en el axis X si se cambia el flex a column justify centra en el axis Y. Y lo mismo sucede con items y su axis Y.

Pequeño aporte:

Cuando en flex realizas la acción con la clase “flex-col” en realidad el uso de las propiedades como justify y align-items(items) se invierte el eje. Es decir en row justify funcionará bien en el EJE X y items en el EJE Y, pero cuando inviertes a column justify estará en el EJE Y e items en el EJE X

Juegos útiles para aprender Flexbox:

(Busquen estos juegos en Google, por algún motivo me dice que los enlaces no son seguros)

Flexbox Froggy
Flexbox Defense

Página de pruebas de Tailwind CSS

Código de la profesora:

<div class=“w-96 h-96 bg-gray-400 p-10 m-20 flex flex-col space-y-4 justify-end items-end”>
<div class=“w-16 h-16 bg-red-300”></div>
<div class=“w-16 h-16 bg-red-300”></div>
<div class=“w-16 h-16 bg-red-300”></div>
<div class=“w-16 h-16 bg-red-300”></div>
</div>