CSS FlexBox

Volver a: Semana No. 4
En esta actividad pondremos en práctica los conceptos clave de maquetación moderna en CSS (Flexbox para diseños en 1D y CSS Grid para estructuras en 2D) utilizando un laboratorio interactivo con edición en vivo.

Objetivos

  • Comprender la diferencia práctica entre el modelo de caja en 1 dimensión (Flexbox) y 2 dimensiones (CSS Grid).
  • Manipular propiedades fundamentales como justify-content, align-items, flex-direction, grid-template-columns, grid-template-rows y la unidad fr.
  • Dominar la sintaxis de definición de columnas y filas con y sin la función repeat().

Instrucciones

Accede al playground haciendo clic en el título de esta asignación de nombre CSS Flexbox ó
    Copia y pega en tu barra de búsqueda del navegador el siguiente enlace:
    
  

    Realiza las prácticas:

Sección con display flex: Experimenta modificando los valores en el editor CSS para centrar elementos, cambiarlos a columna vertical y ajustar espaciados (gap).

Sección con display grid: Prueba los ejemplos explicativos y ejecuta los 5 ejercicios sugeridos al final de la página (creación de columnas fijas, flexibles, layouts mixtos y estructura tipo dashboard).

Entregable:

Toma capturas de pantalla donde se aprecie el código CSS que modificaste y el resultado visual generado en la vista previa.

Redacta una breve conclusión (1 o 2 párrafos) explicando en qué casos prefieres usar Flexbox y en cuáles CSS Grid.

Enviar documento en formato PDF a través de este buzón de Moodle.

Criterios de Evaluación

  •     Correcta ejecución de los ejercicios de Grid y Flexbox (40%)
  •     Capturas de pantalla claras con el código y vista previa (40%)
  •     Conclusión reflexiva y entrega puntual en formato PDF (20%)
   Debe ser entregado del 18 al 24 de Julio de 2026
   Enviar la actividad a profesor.robyirloreto@gmail.com
   




Haga clic en el enlace https://proferobyir.github.io/clases/web2/flexboxgrid/ para abrir el recurso.