En este curso propuesto por los miembros de la comunidad aprenderás a usar Flexbox para dar forma a tus diseños.

Para ello empezaremos analizando los fundamentos y todas las propiedades propias de Flexbox (con ejemplo básicos) y un vez hayas entendido para qué sirve cada una, nos pondremos a construir layouts comunes que se suelen encontrar en todo tipo de sitios web.

Si estás cansado/a te utilizar floats y de hacer mil inventos para estructurar el contenido en los temas de WordPress que desarrollas, no te pierdas este curso 🙂

Además, debido a la complejidad que suponen ciertos términos que analizaremos, he intentado que el curso sea lo más práctico y directo al grano posible.

 

Módulos

Flexbox

Lecciones

• Contenedor & ítems flex
• Entendiendo el eje principal y cruzado con flex-direction
• Distribuyendo ítems en filas y columnas con flex-wrap
• Cambiando el orden de los ítems flex
• Distribuyendo el espacio libre en el eje principal con justify-content
• Alineación de los ítems flex en el eje cruzado con align-items
• Distribuyendo el espacio libre en el eje cruzado con align-content
• Alineación individual de los ítems flex con align-self
• Define el tamaño inicial de los ítems flex con flex-basis
• Factor de crecimiento y contracción de los ítems flex con flex-grow y flex-shrink
• Caso práctico 1: Define un layout de tipo content sidebar
• Caso práctico 2: Creación de un menú de navegación
• Caso práctico 3: Creación de un formulario de suscripción
• Caso práctico 4: Listado de entradas en formato rejilla
• Caso práctico 5: Entradas en formato rejilla con un tema normal
• Caso práctico 6: Entradas en formato rejilla con Genesis Framework
• ¿Quién soporta a Flexbox? Añadimos los vendor prefixes