Completo de Flexbox CSS (con definiciones de cada comando)

📋 Descripción del Curso

Duración: 4 semanas (20 horas aproximadamente)
Nivel: Principiante a Intermedio
Requisitos: Conocimientos básicos de HTML y CSS

🎯 Objetivos del Curso

Al finalizar el curso, serás capaz de:

Entender el modelo de caja flexible (Flexbox)
Crear layouts modernos y responsivos sin usar floats
Dominar la alineación y distribución de elementos
Resolver problemas comunes de maquetación
Construir componentes reales (navbars, cards, galerías, etc.)

📚 Estructura del Curso

Módulo 1: Fundamentos de Flexbox

1.1 ¿Qué es Flexbox?

Historia y evolución del layout en CSS
Problemas que resuelve Flexbox
Soporte en navegadores actuales
Cuándo usar Flexbox vs Grid

1.2 Conceptos clave

Contenedor flex
Elemento padre al que se le aplica display: flex. Todos sus hijos directos se convierten automáticamente en ítems flex.

Ejes: main axis y cross axis

Main axis (eje principal): dirección en la que se colocan los ítems. Definida por flex-direction.
Cross axis (eje transversal): perpendicular al eje principal.

Ítems flex
Los hijos directos del contenedor. Solo ellos se ven afectados por Flexbox (no los nietos).

flex-direction
Define la dirección del eje principal, es decir, cómo se ordenan los ítems dentro del contenedor.

.contenedor {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

Valor	Definición
`row`	Los ítems se colocan en fila, de izquierda a derecha (valor por defecto).
`row-reverse`	Los ítems se colocan en fila, de derecha a izquierda.
`column`	Los ítems se colocan en columna, de arriba hacia abajo.
`column-reverse`	Los ítems se colocan en columna, de abajo hacia arriba.

1.3 Ejercicio práctico

Convertir una lista vertical en horizontal usando Flexbox.

Módulo 2: Propiedades del Contenedor

2.1 `flex-wrap`

Definición: Controla si los ítems se fuerzan a quedarse en una sola línea o pueden saltar a varias cuando no caben.

.contenedor {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Valor	Definición
`nowrap`	Todos los ítems se colocan en una sola línea, aunque se encojan (valor por defecto).
`wrap`	Los ítems saltan a una nueva línea cuando no caben, en orden natural.
`wrap-reverse`	Igual que `wrap`, pero las líneas nuevas se colocan en orden inverso (de abajo hacia arriba).

2.2 `justify-content` (eje principal)

Definición: Alinea y distribuye los ítems a lo largo del eje principal.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Valor	Definición
`flex-start`	Los ítems se agrupan al inicio del eje principal.
`flex-end`	Los ítems se agrupan al final del eje principal.
`center`	Los ítems se centran en el eje principal.
`space-between`	Primer ítem al inicio, último al final, espacio igual entre ellos.
`space-around`	Espacio igual alrededor de cada ítem (los extremos tienen la mitad).
`space-evenly`	Espacio exactamente igual entre todos los ítems y los bordes.

2.3 `align-items` (eje transversal)

Definición: Alinea los ítems a lo largo del eje transversal (perpendicular al principal).

align-items: stretch | flex-start | flex-end | center | baseline;

Valor	Definición
`stretch`	Los ítems se estiran para ocupar todo el alto del contenedor (valor por defecto).
`flex-start`	Los ítems se alinean al inicio del eje transversal.
`flex-end`	Los ítems se alinean al final del eje transversal.
`center`	Los ítems se centran en el eje transversal.
`baseline`	Los ítems se alinean según la línea base del texto.

2.4 `align-content` (múltiples líneas)

Definición: Alinea las líneas de ítems cuando hay más de una fila/columna (requiere flex-wrap: wrap). No confundir con align-items, que alinea ítems dentro de cada línea.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Valor	Definición
`flex-start`	Las líneas se agrupan al inicio del contenedor.
`flex-end`	Las líneas se agrupan al final del contenedor.
`center`	Las líneas se centran en el contenedor.
`space-between`	Primera línea al inicio, última al final, espacio igual entre líneas.
`space-around`	Espacio igual alrededor de cada línea.
`stretch`	Las líneas se estiran para ocupar todo el espacio disponible (valor por defecto).

2.5 `gap`

Definición: Define el espacio entre ítems (filas y columnas) sin necesidad de usar márgenes.

.contenedor {
  gap: 1rem;                    /* fila y columna */
  /* row-gap: 1rem; column-gap: 2rem; */
}

Propiedad	Definición
`gap`	Espacio entre filas y columnas a la vez.
`row-gap`	Espacio solo entre filas.
`column-gap`	Espacio solo entre columnas.

2.6 Ejercicio práctico

Crear una barra de navegación con logo a la izquierda y menú a la derecha.

Módulo 3: Propiedades de los Ítems

3.1 `flex-grow`

Definición: Indica cuánto puede crecer un ítem para ocupar el espacio libre del contenedor. Es un factor proporcional.

.item { flex-grow: 1; } /* 0 = no crece */

Valor	Definición
`0`	El ítem no crece (valor por defecto).
`1`	El ítem crece para ocupar el espacio libre disponible.
`2`, `3`...	Crece el doble, triple, etc. respecto a otros con valor menor.

3.2 `flex-shrink`

Definición: Indica cuánto puede encogerse un ítem cuando falta espacio en el contenedor.

.item { flex-shrink: 1; } /* 0 = no se encoge */

Valor	Definición
`1`	El ítem puede encogerse si falta espacio (valor por defecto).
`0`	El ítem nunca se encoge, aunque se desborde.

3.3 `flex-basis`

Definición: Define el tamaño inicial del ítem antes de aplicar grow o shrink. Acepta valores como px, %, auto, content.

.item { flex-basis: 200px; }

Valor	Definición
`auto`	Usa el tamaño del contenido o el `width`/`height` definido (valor por defecto).
`200px`	Tamaño inicial fijo de 200px.
`30%`	Tamaño inicial relativo al contenedor.
`content`	Tamaño basado en el contenido del ítem.

3.4 Atajo `flex`

Definición: Abreviatura que combina flex-grow, flex-shrink y flex-basis en una sola línea.

.item { flex: 1 1 auto; } /* grow shrink basis */
/* Valores comunes: flex: 1; flex: auto; flex: none; */

Atajo	Equivale a	Definición
`flex: 1`	`1 1 0%`	Crece y se encoge, base 0. Ocupa espacio proporcional.
`flex: auto`	`1 1 auto`	Crece y se encoge según su contenido.
`flex: none`	`0 0 auto`	No crece ni se encoge; mantiene su tamaño.
`flex: 2 1 100px`	grow:2 shrink:1 basis:100px	Crece el doble, se encoge, base 100px.

3.5 `align-self`

Definición: Sobrescribe el align-items del contenedor para un ítem específico.

.item-especial { align-self: flex-end; }

Valor	Definición
`auto`	Hereda el valor de `align-items` del padre (por defecto).
`flex-start` / `flex-end` / `center`	Alinea ese ítem individualmente.
`stretch`	Estira ese ítem en el eje transversal.
`baseline`	Alinea según la línea base del texto.

3.6 `order`

Definición: Cambia el orden visual de los ítems sin modificar el HTML. Valores más bajos aparecen primero.

.item { order: 2; } /* por defecto 0 */

Valor	Definición
`0`	Orden por defecto.
Negativos	Aparecen antes que los de valor 0.
Positivos	Aparecen después de los de valor 0.

3.7 Ejercicio práctico

Crear un layout tipo "santo grial" (header, sidebar, contenido, footer).

Módulo 4: Casos Prácticos Reales

4.1 Centrado perfecto

Definición: Técnica para centrar un elemento vertical y horizontalmente con solo 3 líneas.

.centrar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

4.2 Galería de imágenes responsiva

Definición: Grid flexible de imágenes que se adapta al ancho disponible usando flex y wrap.

.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.galeria img {
  flex: 1 1 250px;
}

4.3 Tarjetas con footer alineado

Definición: Usar margin-top: auto dentro de un contenedor en columna para empujar el footer al fondo.

.card {
  display: flex;
  flex-direction: column;
}
.card-footer {
  margin-top: auto;
}

4.4 Navbar responsivo

Logo + menú
Menú colapsable en móvil

4.5 Formulario con etiquetas alineadas

Definición: Alinear label e input horizontalmente en el centro.

.campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

4.6 Media Object (patrón clásico)

Definición: Patrón con una imagen/avatar a la izquierda y contenido flexible a la derecha.

.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.media-body { flex: 1; }

Módulo 5: Flexbox vs Grid y Buenas Prácticas

5.1 ¿Cuándo usar Flexbox?

Layouts unidimensionales (fila O columna)
Componentes pequeños
Alineación de contenido
Distribución dinámica de espacio

5.2 ¿Cuándo usar Grid?

Layouts bidimensionales (filas Y columnas)
Estructuras complejas de página
Cuando necesitas control preciso en ambas direcciones

5.3 Combinando ambos

Grid para el layout general
Flexbox para los componentes internos

5.4 Errores comunes

Olvidar que Flexbox afecta solo a hijos directos
Confundir justify-content con align-items
Usar márgenes en lugar de gap
No considerar el min-width de los ítems

🧪 Proyecto Final

Construir una landing page completa que incluya:

Navbar responsivo con Flexbox
Hero section centrado vertical y horizontalmente
Grid de tarjetas de servicios (usando Flexbox)
Sección de testimonios con media objects
Footer con columnas alineadas
Todo debe ser responsivo sin media queries complejas

📖 Recursos Recomendados

Guía visual: CSS-Tricks - A Complete Guide to Flexbox
Juego interactivo: Flexbox Froggy
Juego interactivo: Flexbox Defense
Documentación: MDN Web Docs - Flexbox
Herramienta: Flexy Boxes Playground

✅ Evaluación

Actividad	Porcentaje
Ejercicios por módulo	30%
Proyecto final	50%
Participación y retos extra	20%

🎓 Certificación

Al completar el curso y entregar el proyecto final, recibirás un certificado digital que acredita tus conocimientos en Flexbox CSS.

¿Quieres que desarrolle en detalle algún módulo específico, cree los ejercicios prácticos con código completo, o prepare un temario para un nivel más avanzado