Diseño responsivo con cajas flexibles CSS3

Introducción a las Cajas Flexibles o flex-box de CSS3

• Introducción a las cajas flexibles de CSS3
• La propiedad display en el manejo de las cajas flexibles con CSS3
• Cambiar la dirección de las cajas flexibles
• Justificar las cajas flexibles en el eje principal
• Alinear los elementos flexibles en el eje cruzado o complementario
• Crear diferentes lineas con flex-wrap
• Modificar los espacios entre las líneas (renglones) de los ítems
• La propiedad flex-flow para controlar los ejes

Propiedades para los ítems flexibles

• Cambiar el orden de los ítems de la caja flexible
• El comportamiento de la propiedad margin en las cajas flexibles
• La propiedad align-self para la alineación individual de los ítems
• La propiedad flex-grow para el ancho proporcional de los items
• La propiedad flex-shrink para reducir las dimensiones del ítem flexible
• La propiedad flex-basis para establecer las dimensiones del ítem flexible
• La propiedad flex para cambiar los ítems de un contenedor flexible

Crear páginas responsivas con flex-box de CSS3

• Crea la estructura flexible con flex-box
• Hacer una página responsiva con flex-box de CSS3
• Crear una segunda página flexible con flex-box
• Agregar contenido a la página realizada con flex-box
• Hacer la pagina responsiva con los media-query
• Galería flexible utilizando flex-box de CSS3
• Galeria flexible utilizando flex-box, segunda parte
• Hacer una animación con cajas flexibles o flex-box de CSS3
• Crear un menú responsivo con cajas flexibles o flex-box con CSS3

A manera de conclusión

• Ejercicios del curso Introducción a Crear páginas responsivas con flex-box
• Despedida del curso Crear páginas responsivas