BananaMaster

7 Flexbox y Cómo Funcionan display: flex, justify-content, align-items y flex-direction (HTML y CSS, Front End)

Si olvidaste algo — haz clic para ir a la lección.

📘 Tareas Prácticas: Flexbox

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.

✏️ Tarea 1 — flex-direction: row (por defecto)

Tres bloques en fila. Estima el tamaño del padre a ojo:

• Padre — fondo: red, dimensiones en px, agrega display: flex
• Hijo 1 — fondo: #e74c3c, dimensiones en %
• Hijo 2 — fondo: #3498db, dimensiones en %
• Hijo 3 — fondo: #2ecc71, dimensiones en %
• Hijo 4 — fondo: #2c3e50, dimensiones en %
• 💡 flex-direction: row es el valor por defecto — no hace falta escribirlo

✏️ Tarea 2

Tres bloques en columna. Estima el tamaño del padre a ojo:

• Padre — fondo: green, dimensiones en px
• Hijo 1 — fondo: #f39c12, dimensiones en %
• Hijo 2 — fondo: #e74c3c, dimensiones en %
• Hijo 3 — fondo: #1abc9c, dimensiones en %
• Hijo 3 — fondo: #8e44ad, dimensiones en %

✏️ Tarea 3

El bloque está alineado al centro horizontalmente. Estima los tamaños a ojo:

• Padre — fondo: #2d3436, dimensiones en px
• Hijo — fondo: #fdcb6e, dimensiones en %

✏️ Tarea 4

El bloque está alineado al borde derecho. Estima los tamaños a ojo:

• Padre — fondo: #00b894, dimensiones en px
• Hijo — fondo: #d63031, dimensiones en %

✏️ Tarea 5

El bloque está alineado al centro vertical. Estima los tamaños a ojo:

• Padre — fondo: #6c5ce7, dimensiones en px
• Hijo — fondo: #fd79a8, dimensiones en %

✏️ Tarea 6

El bloque está alineado al borde inferior. Estima los tamaños a ojo:

• Padre — fondo: #0984e3, dimensiones en px
• Hijo — fondo: #ffeaa7, dimensiones en %

✏️ Tarea 7

El bloque está ubicado exactamente en el centro horizontal y verticalmente. Estima los tamaños a ojo:

• Padre — fondo: #e17055, dimensiones en px
• Hijo — fondo: #74b9ff, dimensiones en %

✏️ Tarea 8

Tres bloques — los exteriores pegados a los bordes, el del medio entre ellos. Todos centrados verticalmente. Estima los tamaños a ojo:

• Padre — fondo: #2c3e50, dimensiones en px
• Hijo 1 — fondo: #e74c3c, dimensiones en %
• Hijo 2 — fondo: #f1c40f, dimensiones en %
• Hijo 3 — fondo: #2ecc71, dimensiones en %

✏️ Tarea 9

Una columna de dos bloques alineada a la esquina inferior derecha. Estima los tamaños a ojo:

• Padre — fondo: #6c5ce7, dimensiones en px
• Hijo 1 — fondo: #fd79a8, dimensiones en %
• Hijo 2 — fondo: #00cec9, dimensiones en %

✏️ Tarea 10

Dos contenedores flex anidados dentro de uno. Estima los tamaños a ojo:

• Padre exterior — fondo: #dfe6e9, dimensiones en px, display: flex, justify-content: space-between
• Bloque izquierdo — fondo: #b2bec3, ancho en %, propio flex: flex-direction: column, justify-content: space-between
• Izq → Hijo 1 — fondo: #e74c3c, dimensiones en %
• Izq → Hijo 2 — fondo: #3498db, dimensiones en %
• Bloque derecho — fondo: #2d3436, ancho en %, propio flex: justify-content: center, align-items: center
• Der → Hijo — fondo: #fdcb6e, dimensiones en %

📌 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.