Aprendiendo a utilizar Flexbox
Tabla de contenidos
Un par de personas me han mostrado su interés respecto a Flexbox tras leerse mis entradas «Like a Boss», donde explicaba cómo actuar correctamente ante situaciones comunes a la hora de trabajar con CSS.
La intención de esa serie de entradas era no servir como guía, sino para entender qué hacer y cómo ante los distintos problemas. Mi intención nunca fue explicar Flexbox porque hay infinidad de recursos en internet que lo hacen mejor de lo que yo podría hacerlo. Y de eso se trata la entrada de hoy. Alguno de los mejores recursos (en mi opinión) que hay en internet para aprender Flexbox.
¿Necesito aprender Flexbox?
Seguramente ahora mismo te estarás cuestionando si Flexbox es para tí. Llevas haciendo skins para foros desde hace años y nunca has tenido ningún problema. Y es cierto, durante muchos años Flexbox no ha existido o no fue soportado y las páginas seguían teniendo columnas sin ningún problema. Sin embargo, las primeras páginas también utilizaban tablas para estructurar las páginas y todos sabemos que eso no es lo ideal, sobre todo por los dolores de cabeza que nos puede probocar. Para eso está Flexbox, para ayudarnos a resolver problemas comunes de manera sencilla. Si actualmente te ves utilizando muchosfloat o display: inline-block e incluso si usas <center>, entonces te recomiendo encarecidamente que aprendas Flexbox.
Una vez que empieces a utilizar Flexbox cuando trabajas con CSS, no vas a saber como podías pasar tanto trabajo en el pasado para hacer cosas que ahora son exageradamente sencillas de hacer.
Los mejores recursos
A la hora de aprender Flexbox yo creo que lo más fácil y lo que a todo el mundo le va a gustar es aprenderlo jugando. Para eso está «Flexbox Froggy», un juego muy sencillo que te enseña Flexbox y graba las distintas propiedades en tu memoria muscular. Una vez que ya estés más acostumbrado con Flexbox es hora de pasarse a la teoría. La web MDN es la Wikipedia del desarrollo web. Todo lo que necesitas saber sobre Flexbox está en esta completa guía. La web CSS Tricks también tiene una guía muy interesante a la que sugiero hechar una vistazo. Finalmente, algunos enlaces útiles y visuales para fijar conceptos:¿Necesitas enlaces en español?
Si el inglés no es lo tuyo, existen versiones en español de algunos de los tutoriales anteriores (aunque quizás no tan completos). Además, el juego de la rana también está disponible en castellano. Aprovecho también para añadir otras guías en castellano. Nota: Alguno de los tutoriales sugieren el uso de prefijos (-webkit-flex por ejemplo). Actualmente Flexbox es ampliamente soportado y ya no es necesario. Por favor, evita utilizar prefijos a no ser que tengas una política peculiar de soporte a navegadores antigüos.