HTML Layout

En aquesta pràctica treballarem la disposició d'elements amb Flexbox i Grid.

Completa aquests dos jocs:

Ejercicio 1:

Diseña una página como esta:

Puedes utilizar el siguiente código HTML:

<style> img {width: 60px} </style> <span>🤖</span> <span>RobotWeb</span> <span>🔎</span> <img src="1.webp"> <img src="2.webp"> <img src="3.webp"> <img src="4.webp"> <p>Welcome to RobotWeb</p>

Ejercicio 2:

Estoy siempre centrado

Ejercicio 3:

Crezco hacia abajo y tengo un ancho máximo de 150px
[]
Crezco hacia abajo y tengo un ancho máximo de 150px
[]
Crezco hacia abajo y tengo un ancho máximo de 150px
[]

Ejercicio 4:

Tengo un ancho mínimo de 150px, y un máximo del 25%
[]
Ocupo el resto de espacio sobrante
[]

Ejercicio 5:

Ocupo solo la altura que necesito
[]
Ocupo el resto de altura sobrante
[]
Ocupo solo la altura que necesito
[]

Ejercicio 6:

Ocupo solo la altura que necesito
[]
Ocupo el ancho que necesito,
y crezco de altura
[]
Ocupo el ancho restante,
y crezco de altura
[]
Ocupo el ancho que necesito,
y crezco de altura
[]
Ocupo solo la altura que necesito
[]

Ejercicio 7:

Tenemos un ancho mínimo de 100px. Si no cabemos todos en una fila, ocupamos otra
[]
Tenemos un ancho mínimo de 100px. Si no cabemos todos en una fila, ocupamos otra
[]
Tenemos un ancho mínimo de 100px. Si no cabemos todos en una fila, ocupamos otra
[]
Tenemos un ancho mínimo de 100px. Si no cabemos todos en una fila, ocupamos otra
[]

Ejercicio 8:

Tenemos un ancho de 100px. Si no cabemos todos en una fila, ocupamos otra
[]
Tenemos un ancho de 100px. Si no cabemos todos en una fila, ocupamos otra
[]
Tenemos un ancho de 100px. Si no cabemos todos en una fila, ocupamos otra
[]
Tenemos un ancho de 100px. Si no cabemos todos en una fila, ocupamos otra
[]