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