Consejo: align-content solo se aprecia con varias líneas; activa wrap y reduce el espacio disponible.
Código CSS generado
.container {
display: flex;
}
Elemento seleccionado
Haz clic en un item para editar sus propiedades individuales
Bienvenido a Flexbox
Flexbox es un sistema de layout que permite distribuir elementos de manera eficiente...
Actividad: diseñar con Flexbox
Situación: un equipo debe construir una interfaz adaptable para una aplicación universitaria. Los elementos deben conservar una distribución clara en distintos tamaños de pantalla.
Competencia formativa
Diseñar y justificar interfaces web adaptables mediante propiedades de contenedores y elementos Flexbox, comprobando su comportamiento en diferentes distribuciones y tamaños de pantalla.
Producto esperado
Una configuración funcional, su CSS, el registro de retos y una reflexión sobre decisiones y errores.
Aplicabilidad curricular
Recurso transversal para educación superior, aplicable a asignaturas y módulos de programación web, desarrollo frontend, diseño de interfaces, HTML y CSS, así como a trayectos formativos relacionados.
Criterios de logro
Distinguir eje principal y eje cruzado.
Seleccionar correctamente justify-content, align-items y flex-wrap.
Explicar cómo la solución responde al problema.
Resolver al menos tres de los cuatro retos.
Tiempo estimado: 35–45 minutos. Conocimiento previo: estructura HTML y selectores CSS básicos.
Privacidad: tu matrícula y avance se conservan únicamente en este navegador y se incorporan al PDF que tú descargas. El laboratorio no envía información a servicios externos. Puedes eliminar estos datos borrando el almacenamiento del sitio desde la configuración del navegador.
Usa de 4 a 15 dígitos. Se utilizará para identificar el reporte y nombrar el archivo PDF.
Comprobación inicial
Responde las tres preguntas. Recibirás explicación inmediata y podrás corregir antes de practicar.
Evidencia y reflexión
Tu CSS y los intentos de los retos se incorporan automáticamente. Completa las evidencias que explican tu razonamiento.
Retos resueltos
0 de 4
Intentos realizados
0
Reporte de aprendizaje
Vista previa de la evidencia
Declaratoria de Uso de IAG - Profesorado
Conforme a los Lineamientos para el Uso de la IAG - Universidad de Colima
Docente:
Ing. Ricardo Jaramillo Velasco
Curso:
Programación para Web
Periodo escolar:
Agosto-Noviembre 2026
Uso de la IAG en esta herramienta educativa:
Preparar clases (material didáctico interactivo)
Elaborar materiales educativos
Diseñar instrumentos de evaluación formativa
Resolver problemáticas educativas (dificultad para aprender Flexbox)
Generar retroalimentación automática orientativa
Revisar trabajos
Generación de código para herramienta interactiva
Aplicaciones utilizadas:
Kimi AI, Claude y ChatGPT/Codex — apoyo en generación, revisión y mejora del código, estructura didáctica y accesibilidad. Desarrollo y revisión: 2026
Aportaciones de la IAG para la mejora del curso:
Esta herramienta permite a los estudiantes experimentar con Flexbox de manera visual
e interactiva, facilitando la comprensión de conceptos abstractos de CSS que
tradicionalmente presentan dificultades. Reduce el tiempo de retroalimentación y
permite aprendizaje autónomo. La visualización en tiempo real de las propiedades
de Flexbox ayuda a consolidar el conocimiento teórico-práctico.
Información de la conversación:
ID de sesión: FlexboxLab-2026-UCOL Herramientas: Kimi AI, Claude y ChatGPT/Codex Propósito: Generación y revisión de un recurso educativo interactivo con aprendizaje activo Validación humana: El contenido y el uso educativo quedan bajo revisión del docente
Referencia normativa:
Acuerdo No. 23 de 2024 por el cual se emiten los Lineamientos para el uso de la
inteligencia artificial generativa en la Universidad de Colima. Artículos 7, 11 y Anexo II.
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/
Referencias verificadas en los sitios oficiales de W3C, MDN Web Docs y web.dev. Los enlaces se abren en una pestaña nueva.