Flexbox

Les recomiendo este juego para entender como funciona flex es muy bueno y lo podemos aplicar a tailwind
https://flexboxfroggy.com/#es

compas esta es la mejor pagina para poder practicar flex-box. Al menos desde mi punto de vista. Los invito a probarla:
http://www.flexboxdefense.com

Flex es otra propiedad de display pero nos habilita otras propiedades para manipular nuestras cajas. Las propiedades propias de flexbox son:

1. Flex direction

   <div class="flex flex-col">
       <div class="bg-blue-300">1</div>
       <div class="bg-blue-300">2</div>
       <div class="bg-blue-300">3</div>
   </div>
   

2. Align items

   <div class="flex items-center">
       <div class="bg-blue-300">1</div>
       <div class="bg-blue-300">2</div>
       <div class="bg-blue-300">3</div>
   </div>
   

3. Justify content

   <div class="flex justify-center">
       <div class="bg-blue-300">1</div>
       <div class="bg-blue-300">2</div>
       <div class="bg-blue-300">3</div>
   </div>
   

4. Order

   <div class="flex justify-center items-center">
       <div class="order-3 bg-blue-300">1</div>
       <div class="order-1 bg-blue-300">2</div>
       <div class="order-2 bg-blue-300">3</div>
   </div>
   

Flexbox es un tema muy amplio, así que los invito a leer más a detalle sobre este tema en este otro artículo.

Una guía completa de Flexbox!

Una guía de alineación de elementos.
__

Dejo link para ver la documentacion sobre Flexbox https://tailwindcss.com/docs/display/#flex

La neta está más fácil con tailwind. 😎🤘

Por mi parte desconocía la propiedad baseline dentro de Flex. Gran clase

Guía completa de flexbox (me ha servido de mucho)

Align Items

Que buena clase y explicación de flex prácticamente para todo no solo para Tailwind, muchas gracias.

Súper clara la explicación de flex box con este framework :3

Flex justify-around y justify between crea espacios igual entre los elementos con la diferencia que en around si da margen en cada extremo de los elementos

Me gusto mucho la forma en la que podríamos usar el order. De esa manera podríamos ajustar los elementos de una manera muy fácil :0

Buena explicación!

No conocia la propiedad order de Flex y esta bastante buena, pero leí que no es muy buena para la accesibilidad, entonces para este caso sería mejor usar grid.
Grid y Flex ❤️

Excelente explicación!

Si quieren escribir más rápido código con VSCode, utilicen Emmet:

.bg-gray-800.p-8>.bg-gray-300.px-4.py-2.m-2{$}*3

Propiedades para Flex:

• Flex Direction: acomodar elementos de manera horizontal o vertical
• Align Items: alinea los elementos
• Justify Content: justifica los elementos
• Order: ordena los elementos

Si necesitan entender mas a profundidad estos conceptos:

Aquí