Profe Johnny
Ejercicios · Grupo 4 de 6

Flexbox

Alinear y distribuir elementos en una dimensión. Intenta resolver cada ejercicio en el editor antes de revelar la solución.

1 Ejercicio 1 Básico

Activa flexbox en un contenedor con 3 cajas hijas.

ejercicio-1
Ver solución sugerida
solución 1
2 Ejercicio 2 Básico

Centra el contenido horizontal y verticalmente con justify-content y align-items.

ejercicio-2
Ver solución sugerida
solución 2
3 Ejercicio 3 Básico

Distribuye 3 elementos con justify-content: space-between.

ejercicio-3
Ver solución sugerida
solución 3
4 Ejercicio 4 Intermedio

Cambia flex-direction a column para apilar elementos verticalmente.

ejercicio-4
Ver solución sugerida
solución 4
5 Ejercicio 5 Intermedio

Usa flex-wrap: wrap para que las tarjetas salten de línea si no caben.

ejercicio-5
Ver solución sugerida
solución 5
6 Ejercicio 6 Avanzado

Usa align-self para que un solo elemento se alinee distinto al resto.

ejercicio-6
Ver solución sugerida
solución 6
7 Ejercicio 7 Intermedio

Usa flex: 1 para que una caja crezca y ocupe el espacio sobrante.

ejercicio-7
Ver solución sugerida
solución 7
8 Ejercicio 8 Avanzado

Crea una barra de navegación con logo a la izquierda y links a la derecha.

ejercicio-8
Ver solución sugerida
solución 8
9 Ejercicio 9 Avanzado

Ordena visualmente 3 elementos usando la propiedad order sin cambiar el HTML.

ejercicio-9
Ver solución sugerida
solución 9
10 Ejercicio 10 Avanzado

Construye 3 tarjetas iguales en fila con gap y que se centren en el contenedor.

ejercicio-10
Ver solución sugerida
solución 10