En internet existe una gran cantidad de tutoriales y cursos, relacionados con flexbox. No quiero crear un artículo que explique los conceptos básicos de flexbox. Mi objetivo es poner en un solo lugar los enlaces que me parecen interesantes y decirte lo que puedes hacer para dominar flexbox.
Por supuesto, la principal fuente de información es la especificación de Flexbox.
? Una forma fácil de practicar flexbox es realizar un diseño de un ?calendario.
Tutoriales Completos
Ejemplos Avanzados
- https://www.flexboxpatterns.com/
- http://flexboxgrid.com/
- https://www.quackit.com/html/templates/css_flexbox_templates.cfm
- https://designmodo.com/flexbox-snippets/
- https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Tutoriales en YouTube
Generadores de Código
No estoy seguro si es una buena idea generar código para los diseños de flexbox. Porque no estás aprendiendo, pero al menos el código será multiplataforma y funcionará bien.
- http://the-echoplex.net/flexyboxes/
- https://loading.io/flexbox/
- http://flexbox.buildwithreact.com/
- http://maxsteenbergen.com/fibonacci/
Ejemplos Adicionales
- https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35
- https://philipwalton.github.io/solved-by-flexbox/
- https://flexboxfroggy.com/
React
- https://roylee0704.github.io/react-flexbox-grid/
- https://github.com/jxnblk/reflexbox
- https://github.com/paulmelnikow/react-flexbox-svg
- https://github.com/ekros/nice-react-layout
- https://github.com/buildo/react-flexview
React Native
- https://facebook.github.io/react-native/docs/flexbox
- https://medium.com/@yoniweisbrod/a-mini-course-on-react-native-flexbox-2832a1ccc6
- https://github.com/facebook/yoga
Juega con Flexbox
Aquí puedes explorar el poder del diseño de flexbox y probar sus diferentes propiedades. Combina varias propiedades de flexbox para obtener diseños complejos.
También puede ver la página completa aquí o obtener el código fuente en GitHub.
