Diseño responsivo con cajas flexibles CSS3

Conoce la poderosa herramienta de las cajas flexibles o flex-box para hacer páginas responsivas

What you'll learn:

• Crear una página a base de las cajas flexibles
• Cambiar la dirección de las cajas flexibles de horizontal a vertical y el orden de las cajas internas
• Justificar y alinear las cajas internas
• Cambiar el orden de las cajas internas individuales
• Cambiar la proporción del ancho y del largo de los items flexibles
• Crear páginas responsivas con cajas flexibles
• Aplicar transiciones en las cajas flexibles
• Crear una galería a partir de cajas flexibles
• Crear un menú responsivo

En este curso aprenderás a desarrollar páginas responsivas por medio de la poderosa herramienta de las cajas flexibles o flex-box. Nos basaremos en la especificación más reciente de la W3C de 2014 de las "flex-box". Analizaremos desde las bases de este esquema, que nos permitirá hacer formatos o layouts, así como la forma de alinearlos vertical u horizontalmente, centrarlas, cambiar el orden de las cajas internas o ítems flexibles, así como las propiedades para "estirarlas", rotarlas y adaptarse de forma natual, las cajas internas al contenedor flexible.

Haremos ejemplos de páginas responsivas iniciando desde cero, hasta llenarlas de contenido. Realizaremos una galería responsiva con diferentes imágenes, que se adaptarán al tamaño del dispositivo, adaptándose tanto a tabletas como a teléfonos inteligentes. También haremos un ejemplo de cómo animar a las cajas flexibles por medio de las propiedades de transición de los estilos en cascada nivel tres. Por último codificaremos un menú horizontal con cajas flexibles, que cambiará su orientación a vertical cuando se visualice en pantallas pequeñas, como la de los teléfonos, donde es complicado los menús largos.

Para que puedas aprovechar este curso, es necesario que tengas conocimientos mínimos de HTML y CSS. También es deseable que conozcas HTML5 y CSS3, aunque no es indispensable.

Para tomar este curso necesitas un editor de código como SublimeText. Brackets, Aptana o Dreamweaver y un navegador moderno, así como muchas ganas de aprender.