Intermedio⏱ 40 min
🎨
CSS · Capítulo 7
Flexbox
Domina el layout unidimensional con Flexbox para alinear y distribuir elementos fácilmente.
📖
Teoría
Flexbox es el sistema de layout más usado en CSS moderno. Convierte un contenedor en un contexto flexible donde los hijos se alinean y distribuyen fácilmente.
Propiedades del contenedor flex:
display: flex
flex-direction: row | column
justify-content: distribución en el eje principal
align-items: alineación en el eje cruzado
flex-wrap: permite que los ítems salten de línea
gap: espacio entre ítems
css
/* Contenedor flex básico */
.nav {
display: flex;
justify-content: space-between; /* logo a la izq, links a la der */
align-items: center;
padding: 1rem 2rem;
}
/* Grid de tarjetas responsiva */
.cards {
display: flex;
flex-wrap: wrap; /* saltar de línea si no caben */
gap: 1rem;
}
.card {
flex: 1 1 300px; /* crecer, encoger, base 300px */
}
/* Centrar vertical y horizontal */
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}💡Flexbox Froggy
Aprende Flexbox jugando en flexboxfroggy.com — es el recurso más divertido para dominar todas las propiedades de Flexbox con 24 niveles interactivos.
⚡
Ejercicio práctico
🎯 Tu misión
Usa Flexbox para crear: un header con logo a la izquierda y nav a la derecha, y una cuadrícula de tarjetas de cursos que se adapte y envuelva en múltiples filas.
Vista previa