1
2
3
4
5
6
1.- Diferencia Flexbox y Grid
- El flexbox es más flexible ya que podemos controlar el ancho el alto.
- El flexbox es unidireccional: vertical/horizontal: organiza los elementos en una sola dirección.
- El Grid es más rígido ya que todas las columnas/filas tienen el mismo alto y ancho.
- En el grid puedo aumentar el número de filas y columnas.
- El grid tiene flujo automático. Esto supone que se colocan los elementos de forma automática sin decir nada cada vez (solo al elegir el flujo)
- ACTIVIDAD 1
Debes conseguir la siguiente estructura utilizando flexbox y grids
ACTIVIDAD 1
¿Qué te parece?
Ahora te toca a ti. ¿Cómo crees que se ha hecho esta estructura?
SOLUCIÓN ACTIVIDAD 1
1.- Añade un grid con dos filas. Escribe con un encabezado "Actividad 1 + nombre" (céntralo y "auto-alinea" (estilo y avanzado)
2.- Añade en la fila 2 vacía un flexbox dirección horizontal. Añade una foto.
3.- Añade un grid al lado de la foto con 2 filas y una columna.
4.- Añade un grid con 2 columna y 1 fila en la primera fila anterior. Incluye distintos elementos con formato en cada cuadrícula.
ACTIVIDAD 2: CONSIGUE EL SIGUIENTE DISEÑO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Burt is different
Solución Actividad 2:
1.- Crea un flexbox horizontal y cambia el fondo.
2.- Inserta un encabezado; en "avanzado" pon en posición "absoluto" (para poder moverlo).
3.- Las dos cuadrículas en blanco con texto superpuestas, se puede conseguir: directamente incluyendo texto y cambiando el fondo y en avanzado "posición absoluta" o con dos contenedores flexbox y en editor de contenedor "posición absoluto"
Este texto lo he duplicado
Esta actividad es muy sencilla.
Solución
Actividad 2
ACTIVIDAD 3: MÁSCARAS
Las máscaras son una forma de recortar visualmente una imagen, pero no la modifica realmente.
1.- Inserta un grid (1 fila y dos columnas)
2.- Inserta una imagen en cada cuadrícula.
