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:
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:
![duxtech](https://res.cloudinary.com/practicaldev/image/fetch/s---pbEE5q_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F391281%252Ffe9f8985-2f7e-4614-af22-73b275663b9a.jpg)
10 trucos y optimizaciones de código con JavaScript para 2021😎
Cristian Fernando ・ Mar 29 '21
![duxtech](https://res.cloudinary.com/practicaldev/image/fetch/s---pbEE5q_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F391281%252Ffe9f8985-2f7e-4614-af22-73b275663b9a.jpg)
Las bondades del método includes() en JavaScript
Cristian Fernando ・ Mar 6 '21
![duxtech](https://res.cloudinary.com/practicaldev/image/fetch/s---pbEE5q_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.dev.to/cdn-cgi/image/width%3D150%2Cheight%3D150%2Cfit%3Dcover%2Cgravity%3Dauto%2Cformat%3Dauto/https%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Fuser%252Fprofile_image%252F391281%252Ffe9f8985-2f7e-4614-af22-73b275663b9a.jpg)