Flexbox

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

En tablet

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

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

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

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

¿justify e items?

Cuando usamos las clases justify e items no hablamos de horizontalidad y verticalidad, sino que hablamos de ejes.
justify hace referencia al eje principal e items al eje secundario.
Cuando usamos flex-row nuestro eje principal es el horizontal y el eje secundario es el vertical y cuando usamos flex-col es al revés.
Por eso la profe dice “un items-center para centrar en el eje y” ya que por defecto sí se alinearía en el eje y pero estábamos trabajando con flex-col y por eso realmente se alineó en el eje x.

Cuando usamos flex-col es como si rotáramos todo 90° grados.

Para entender la locura que a veces puede ser flexbox les recomiendo este simpático juego: Flexbox Froggy

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.

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

Resultado de una card profile, muchas de las propiedades las busque en la documentación. Ya que son nuevas para mi 💚pero se logro! Comparto codigo tambien…

<div class="w-screen h-screen bg-gradient-to-br from-violet-900 to-violet-500 flex justify-center items-center">
    <div class="w-1/2 h-2/3 bg-gray-50 rounded-2xl absolute">
      <div class="w-full h-1/2 bg-neutral-900 rounded-2xl rounded-b-none py-7">
        <img class="w-1/4 rounded-full mx-auto" src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
        <h2 class="text-neutral-100 bold text-4xl text-center my-3">Diego Vanegas</h2>
        <p class="text-neutral-400 text-center text-sm">Frontend | Designer | UI</p>
        <button class="block relative w-1/2 h-1/5 my-8 mx-auto rounded-full text-neutral-50 text-lg bg-violet-700 shadow-lg shadow-violet-700/50">Follow</button>
      </div>
  
      <div class="flex justify-center my-28">
        <p class="text-gray-400 text-base">This prifile is private.</p>
      </div>/
    </div>
  </div>

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

📝 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 parece que no explicó bien el uso de justify e items. Uno es para alinear en el eje principal y el otro en el secundario

Wow! empezar es un horror pero una vez trabajando tailwind es de lo mas divertido!

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.

Ejercicio

Resultado

Código

 <div class="w-96 h-96 px-6 py-4 mt-5 ml-8 border rounded-xl ">
    <div class="flex flex-col gap-3">
      <h2 class="self-center text-lg font-bold">Primary colors</h2>
      <div class="flex justify-between items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-24 h-24 bg-red-600 rounded-xl"></div>
          <p>Red</p>
        </div>
         <div class="flex flex-col items-center gap-2">
          <div class="w-24 h-24 bg-yellow-400 rounded-xl"></div>
          <p>Yellow</p>
        </div>
         <div class="flex flex-col items-center gap-2">
          <div class="w-24 h-24 bg-blue-500 rounded-xl"></div>
          <p>Blue</p>
        </div>
      </div>

      <h2 class="self-center text-lg font-bold">Secondary colors</h2>

      <div class="flex justify-between items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-24 h-24 bg-green-500 rounded-xl"></div>
          <p>Green</p>
        </div>
         <div class="flex flex-col items-center gap-2">
          <div class="w-24 h-24 bg-orange-400 rounded-xl"></div>
          <p>Orange</p>
        </div>
         <div class="flex flex-col items-center gap-2">
          <div class="w-24 h-24 bg-purple-700 rounded-xl"></div>
          <p>Purple</p>
        </div>
      </div>
    </div>
  </div>

pero la verdad yo no entendi por que razon al poner w-96 se hace el widh de 96 px y por que razon el bg sifnifica backgroud yo no veo eso en el archivo de tailwindcss

🍃 Tailwind CSS es una herramienta muy popular entre los desarrolladores web y se utiliza en una amplia variedad de proyectos. Algunos ejemplos de proyectos que utilizan Tailwind CSS son:

• Laravel Jetstream: Es una plantilla de aplicación Laravel que viene con un conjunto de componentes de interfaz de usuario predefinidos y una configuración de estilos basada en Tailwind CSS.

• Base Web: Es una biblioteca de componentes de interfaz de usuario de código abierto desarrollada por Uber que utiliza Tailwind CSS como estilo base.

• Ghost: Es una plataforma de publicación de código abierto que utiliza Tailwind CSS para estilizar su interfaz de usuario.

• SuperHi: Es una plataforma de educación en línea que utiliza Tailwind CSS para estilizar su sitio web y aplicaciones móviles.

• Miro: Es una herramienta de colaboración en línea que utiliza Tailwind CSS para estilizar su interfaz de usuario.

Estos son solo algunos ejemplos de proyectos que utilizan Tailwind CSS. Como puedes ver, Tailwind CSS es una herramienta muy versátil y se utiliza en una amplia variedad de proyectos, desde aplicaciones web y móviles hasta plataformas de publicación y herramientas de colaboración en línea.

Espero que estos ejemplos te hayan ayudado a entender mejor cómo se utiliza Tailwind CSS en la práctica

Un ejercico de frontend mentor con tailwind:
🚀 Challenge
🔍 Frontend mentor challenge page

UHMM tocará ver más la documentación uwu

Siuuuuuuu

<div class="flex flex-col items-center overflow-hidden bg-black">
  <div class="mb-10 mt-5 h-96 w-72 rounded bg-slate-200 p-5 text-center">
    <p class="m-3 rounded border-2 border-black bg-indigo-400 font-mono text-white">Lionel Messi</p>
    <img src="https://css2.rtve.es/css/rtve.2022.deportes/mundial-futbol-catar-TE_SM7ALFL/estrellas/i/jugadores/messi.png" />
  </div>

  <div class="mb-10 mt-5 h-96 w-72 rounded bg-slate-200 p-5">
    <p class="text-center m-3 rounded border-2 border-black bg-indigo-400 font-mono text-white">Cristiano Ronaldo</p>
    <img class="h-5/6 mx-auto" src="https://www.footyrenders.com/render/cristiano-ronaldo-452-345x540.png" />
  </div>
</div>

Example!!!.

<div class=“flex h-screen bg-gray-50”>
<div class=“m-5 flex h-80 w-80 space-x-4 bg-sky-100 p-5”>
<div class=“h-16 w-16 bg-sky-300”></div>
<div class=“h-16 w-16 bg-sky-400”></div>
<div class=“h-16 w-16 bg-sky-500”></div>
<div class=“h-16 w-16 bg-sky-600”></div>
</div>

<div class=“m-5 h-80 w-80 flex-col space-y-2 bg-sky-100 p-5”>
<div class=“h-16 w-16 bg-sky-300”></div>
<div class=“h-16 w-16 bg-sky-400”></div>
<div class=“h-16 w-16 bg-sky-500”></div>
<div class=“h-16 w-16 bg-sky-600”></div>
</div>

<div class=“m-5 h-80 w-80 flex flex-col space-y-2 bg-sky-100 p-5 justify-center items-center”>
<div class=“h-16 w-16 bg-sky-300”></div>
<div class=“h-16 w-16 bg-sky-400”></div>
<div class=“h-16 w-16 bg-sky-500”></div>
<div class=“h-16 w-16 bg-sky-600”></div>
</div>

<div class=“m-5 h-80 w-80 flex flex-col space-y-2 bg-sky-100 p-5 justify-end items-end”>
<div class=“h-16 w-16 bg-sky-300”></div>
<div class=“h-16 w-16 bg-sky-400”></div>
<div class=“h-16 w-16 bg-sky-500”></div>
<div class=“h-16 w-16 bg-sky-600”></div>
</div>

</div>

Este proyecto fue hecho con TypeScript para el Backend (yo creé la API) y Next.js con Tailwind para el front end 😃
Hajime No Ippo API

Flex es más sencillo, pero Grid más poderoso.

<div class=“w-96 h-96 bg-blue-200 p-10 m-20 flex flex-col space-y-3 justify-center items-center border-red-700”>
<div class=“w-16 h-16 bg-green-300 rounded-full border-2 border-red-700”></div>
<div class=“w-16 h-16 bg-green-500 rounded-lg border-x-2 border-yellow-400”></div>
<div class="w-16 h-16 bg-green-700 rounded-md border-y-4 "></div>
<div class=“w-16 h-16 bg-green-900 rounded-sm border-2 border-red-900 shadow-lime-700 shadow-xl”></div>

https://play.tailwindcss.com/UT1rtCc1gY

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>

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>