Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind 2 y 3

Curso B谩sico de Tailwind 2 y 3

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Flexbox

9/29
Recursos

Aportes 30

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

play.tailwindcss.com/kVRSbJbY5q
Espero no tener problemas legales鈥 馃き

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 鈥渦n 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

Peque帽o aporte:

Cuando en flex realizas la acci贸n con la clase 鈥渇lex-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

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>

馃摑 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.

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>

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

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=鈥渇lex h-screen bg-gray-50鈥>
<div class=鈥渕-5 flex h-80 w-80 space-x-4 bg-sky-100 p-5鈥>
<div class=鈥渉-16 w-16 bg-sky-300鈥></div>
<div class=鈥渉-16 w-16 bg-sky-400鈥></div>
<div class=鈥渉-16 w-16 bg-sky-500鈥></div>
<div class=鈥渉-16 w-16 bg-sky-600鈥></div>
</div>

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

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

<div class=鈥渕-5 h-80 w-80 flex flex-col space-y-2 bg-sky-100 p-5 justify-end items-end鈥>
<div class=鈥渉-16 w-16 bg-sky-300鈥></div>
<div class=鈥渉-16 w-16 bg-sky-400鈥></div>
<div class=鈥渉-16 w-16 bg-sky-500鈥></div>
<div class=鈥渉-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=鈥渨-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=鈥渨-16 h-16 bg-green-300 rounded-full border-2 border-red-700鈥></div>
<div class=鈥渨-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=鈥渨-16 h-16 bg-green-900 rounded-sm border-2 border-red-900 shadow-lime-700 shadow-xl鈥></div>

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=鈥渨-96 h-96 bg-gray-400 p-10 m-20 flex flex-col space-y-4 justify-end items-end鈥>
<div class=鈥渨-16 h-16 bg-red-300鈥></div>
<div class=鈥渨-16 h-16 bg-red-300鈥></div>
<div class=鈥渨-16 h-16 bg-red-300鈥></div>
<div class=鈥渨-16 h-16 bg-red-300鈥></div>
</div>