A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Flexbox

12/29
Recursos

Aportes 18

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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!

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

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

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í