Flexbox

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