Flexy Boxes: Generador de código Flexbox 😬

Cristian Fernando - May 16 '21 - - Dev Community

Este más que un post al que les tengo acostumbrado, es un recurso interesante que encontré y que quisiera compartir con ustedes. Se trata de una herramienta llamada Flexy Boxes que ayuda a generar código flexbox de una manera bastante visual y desde mi punto de vista muy sencilla también.

Puedes crear n número de flex containers y jugar con la mayoría de sus propiedades más importantes:

  • display
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

Pero también te da la opcion de configurar las propiedades de los flex-items:

  • order
  • align-self
  • flex

A continuación un screen:

img

Espero que pueda servirles de ayuda, especialmente para aquellos devs que están aprendiendo estos conceptos desde cero.


Si gustas, puedes leer otras entradas mías que podrían ser de tu interés:


img

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .