Para cada tarea crea clases separadas en style.css y aplícalas a las etiquetas correctas.
📌 Estructura de archivos: index.html + style.css
💡 Regla clave: display: flex siempre se escribe en el padre, no en el
elemento hijo.
Un bloque alto a la izquierda. A la derecha hay tres bloques idénticos apilados uno debajo del otro. El primero toca el borde superior, el segundo está centrado, el tercero toca el borde inferior.
Una tarjeta está en el centro de un contenedor grande. Dentro de la tarjeta hay un bloque arriba, debajo dos bloques uno al lado del otro, y abajo otro bloque ancho.
El contenedor está dividido en tres columnas. A la izquierda hay dos bloques — arriba y abajo. En el centro hay un bloque en medio. A la derecha hay tres bloques idénticos apilados uno debajo del otro.
Un bloque ancho arriba. Debajo hay dos columnas. En la columna izquierda hay tres bloques idénticos apilados uno debajo del otro. En la columna derecha hay un bloque alto.
El contenedor está formado por dos partes. A la izquierda hay un bloque cuadrado. A la derecha hay dos filas. Cada fila tiene dos bloques idénticos uno al lado del otro.
px para todos los tamaños.Una tarjeta está en el centro de un contenedor grande. Arriba hay tres bloques pequeños en una fila. En el medio hay un bloque ancho. Abajo hay de nuevo tres bloques pequeños en una fila.
Repite la disposición de los bloques.
px para todos los tamaños.
Importante:
Cada clase se escribe por separado en style.css.
Usa solo HTML y CSS.
Practica las propiedades:
display: flex,
flex-direction,
justify-content,
align-items.