Flexbox en CSS resuelve uno de los problemas más antiguos del desarrollo web: alinear y posicionar elementos sin pelearte con propiedades complicadas. Si estás aprendiendo CSS y quieres centrar elementos vertical u horizontalmente con pocas líneas de código, esta herramienta es tu mejor aliada.

¿Qué es Flexbox y para qué sirve en CSS?

Flexbox es una herramienta de CSS que te permite alinear y posicionar elementos en una sola dirección: vertical u horizontal, pero no en ambas al mismo tiempo. Con ella puedes centrar elementos, moverlos a la izquierda, a la derecha o distribuirlos con espacios uniformes, todo de forma muy sencilla.

La lógica detrás de Flexbox parte de una idea clave: trabajas con elementos contenedores (padres) y elementos hijos, y cada grupo tiene propiedades distintas. Esa separación es la que hace que todo funcione en conjunto [01:30].

¿Qué hace Flexbox en CSS? Permite alinear y distribuir elementos hijos dentro de un contenedor padre, de forma horizontal o vertical, usando propiedades como display: flex, justify-content y align-items.

¿Cómo identifico padres e hijos en HTML?

Un elemento padre es cualquier etiqueta que contenga otras etiquetas dentro. Por ejemplo, una section que envuelve un h2, un label y un input actúa como padre, mientras que el h2 que no tiene nada adentro es solo hijo.

Ahora, hay un caso interesante: un elemento puede ser hijo y padre al mismo tiempo. Cuando eso pasa, puede usar propiedades de ambos grupos. Esta dualidad es clave para construir layouts complejos.

¿Cómo activar Flexbox con display flex?

Lo primero es decirle a tu contenedor que va a trabajar con esta tecnología. La propiedad display: flex es exclusiva del padre y es el punto de partida obligatorio [04:20].

Una vez activado, todos los hijos directos se acomodan automáticamente uno al lado del otro. Esto ocurre porque Flexbox tiene una propiedad llamada flex-direction que por defecto vale row.

• row: organiza los elementos en fila, de izquierda a derecha.
• column: organiza los elementos en columna, de arriba hacia abajo.

Cambiar la dirección no es solo estético: afecta cómo funcionan otras propiedades de alineación. Y aquí viene lo importante.

¿Para qué sirve justify content y align items?

Estas dos propiedades son las que realmente posicionan tus elementos hijos dentro del contenedor.

• justify-content: alinea los elementos en el eje principal (el que marca flex-direction).
• align-items: alinea los elementos en el eje contrario al principal.

Si tu flex-direction es row, entonces justify-content: center centra horizontalmente y align-items: center centra verticalmente. Pero si cambias a column, los ejes se invierten: justify-content actúa en vertical y align-items en horizontal.

¿Cómo centro un elemento con Flexbox? Aplica al contenedor padre tres propiedades: display: flex, justify-content: center y align-items: center. Eso centra los hijos en ambos ejes.

¿Por qué necesito definir altura con 100vh?

Un detalle que confunde a muchos: cuando intentas centrar verticalmente y nada parece moverse, casi siempre es porque el contenedor padre no tiene altura suficiente para que sus hijos se desplacen.

La solución pasa por darle altura al padre. La unidad 100vh significa el 100% del alto visible de la pantalla en ese momento, así que tu contenedor ocupará toda la ventana del navegador y tendrás espacio real para distribuir los hijos [10:15].

Sin esa altura, da igual si pones los elementos arriba, al centro o abajo: visualmente se verán en el mismo lugar porque no hay espacio que repartir.

¿Qué propiedades pertenecen al padre y cuáles al hijo?

La guía visual de CSS Tricks sobre Flexbox es uno de los mejores recursos para entender esta separación. Aunque está en inglés, los gráficos hacen el aprendizaje muy intuitivo.

Propiedades del contenedor padre:

• display: flex para activar Flexbox.
• flex-direction para definir el eje principal.
• justify-content para alinear en el eje principal.
• align-items para alinear en el eje contrario.

Propiedades de los elementos hijos:

• order para cambiar el orden de aparición.
• flex-grow para definir cuánto crece un hijo respecto a otros.
• flex-shrink y flex-basis para controlar tamaño y comportamiento.

Esta clasificación te ayuda a saber exactamente dónde aplicar cada regla y evita errores típicos como intentar usar display: flex en un hijo esperando que afecte su posición.

¿Cómo aplicar Flexbox en un proyecto real?

En el proyecto Mokepon, el objetivo es centrar todo el bloque de selección de mascota en pantalla completa. El proceso es directo:

1. Identifica el contenedor padre y mueve dentro todos los elementos que quieres centrar, incluyendo el h1.
2. Selecciona el contenedor por su id en el archivo CSS usando #.
3. Aplica display: flex, flex-direction: column, justify-content: center, align-items: center y height: 100vh.

Un truco práctico: usa el inspector de Chrome para experimentar con los valores antes de escribirlos en tu código. Cuando encuentres la combinación correcta, copias y pegas en tu archivo CSS cuidando la indentación.

Flexbox tiene muchísimas más propiedades y casos de uso. ¿Qué layout quieres construir tú con Flexbox? Cuéntalo en los comentarios.