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.
Cuatro bloques idénticos distribuidos uniformemente en todo el ancho del contenedor.
px para todos los tamaños.Tres bloques apilados uno debajo del otro, centrados horizontalmente dentro del contenedor.
Tres bloques apilados uno debajo del otro. El primero toca el borde superior, el segundo está en el medio, el tercero toca el borde inferior.
px.Tres bloques ubicados en el borde inferior del contenedor.
px para todos los tamaños.Cuatro bloques ubicados en el borde inferior del contenedor y distribuidos uniformemente.
px para todos los tamaños.Un bloque alto a la izquierda. A la derecha — dos bloques uno debajo del otro. El de arriba toca el borde superior, el de abajo — el inferior.
El contenedor está formado por dos partes. A la izquierda hay dos bloques — uno arriba, otro abajo. A la derecha hay un bloque, ubicado exactamente en el centro.
Una tarjeta está en el centro de un contenedor grande. Dentro de la tarjeta hay tres bloques apilados uno debajo del otro. El de arriba toca el borde superior de la tarjeta, el de abajo — el inferior, y todos los bloques están centrados horizontalmente.
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.