Recurso educativo digital autocontenido para comprender, aplicar y justificar el uso de CSS Flexbox en interfaces web adaptables. Integra tutorial guiado, laboratorio de experimentación en tiempo real, plantillas, retos, comprobación formativa, reflexión y generación de evidencia en PDF. Favorece el aprendizaje activo y autónomo en asignaturas de programación web y áreas derivadas.
Licencia de uso
Reconocimiento-No Comercial-Compartir Igual (CC BY-NC-SA)
Recurso educativo digital autocontenido para comprender, aplicar y justificar el uso de CSS Flexbox en interfaces web adaptables. Integra tutorial guiado, laboratorio de experimentación en tiempo real, plantillas, retos, comprobación formativa, reflexión y generación de evidencia en PDF. Favorece el aprendizaje activo y autónomo en asignaturas de programación web y áreas derivadas.
Palabras clave:
Español
Flexbox, CSS, programación web, desarrollo frontend, diseño adaptable, interfaces web, aprendizaje interactivo, educación superior
Este Recurso Educativo Digital aborda el uso de CSS Flexbox para diseñar y organizar interfaces web adaptables. Está dirigido principalmente a estudiantes de educación superior, formación técnica y cursos relacionados con programación web, desarrollo frontend, HTML y CSS, que cuenten con conocimientos básicos de estructura HTML y selectores CSS.
El recurso presenta un nivel de complejidad introductorio a intermedio y utiliza un enfoque de aprendizaje activo, práctico y autónomo. Los contenidos avanzan progresivamente desde la identificación del eje principal y el eje cruzado hasta la aplicación de propiedades de dirección, alineación, distribución, separación y ajuste de elementos.
La interacción se realiza mediante un laboratorio visual en tiempo real, tutorial guiado, plantillas, retos, preguntas de autoevaluación, retroalimentación inmediata y actividades de reflexión. El estudiante puede experimentar con diferentes configuraciones, observar sus efectos, corregir errores y justificar sus decisiones de diseño. Al finalizar, puede generar una evidencia en PDF que documenta su desempeño y aprendizaje.
Densidad semántica:
Media
Rango típico de edad:
Jóvenes de 22-35 años
Adolescentes de 12-21 años
Adultos de los 36 años en adelante
Tipo de interacción:
Activa
Nivel de interacción:
Alto
Rol del usuario final previsto:
Estudiante
Público en general
Tiempo típico de aprendizaje:
1 hora
Tiene costo:
No
Tiene Copyright u otras restricciones:
No
Descripción:
Reconocimiento-No Comercial-Compartir Igual (CC BY-NC-SA)
Referencias consultadas:
Bell, A., & Andrew, R. (2021, 21 de abril). Flexbox. web.dev. https://web.dev/learn/css/flexbox?hl=es
MDN contributors. (2026, 31 de marzo). Conceptos básicos de flexbox. MDN Web Docs. https://developer.mozilla.org/es/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts
World Wide Web Consortium. (2024, 12 de diciembre). Web Content Accessibility Guidelines WCAG 2.2 (W3C Recommendation). https://www.w3.org/TR/WCAG22/
World Wide Web Consortium. (2025, 14 de octubre). CSS Flexible Box Layout Module Level 1 (W3C Candidate Recommendation Draft). https://www.w3.org/TR/css-flexbox-1/