Hello World!

¡Hello World 👋! Esta entrada marca mi primer paso en el mundo de los blogs. La idea es ir explorando diferentes conceptos de React, CSS y Javascript a través de tutoriales interactivos sencillos, fáciles de entender y sobretodo, útiles.

Para ir encendiendo motores he decidido empezar por algo básico pero esencial: Flexbox.

Si eres de los que aún se pregunta cómo centrar un div, te interesa comprender las bases de Flexbox y en especial, cómo funcionan las propiedades flex-direction, justify-content y align-items.

He visto a muchos Junior (y no tan Junior 😅) pasarlas canutas con esto y creo que el problema es que puede ser un poco complicado de visualizar. Flexbox es más fácil de entender cuando lo ves en acción, y eso es justo lo que vamos a hacer aquí.

Lo principal que tienes que entender es que todo se organiza en dos ejes:

  1. Main Axis: Este es el eje que configuramos con flex-direction y controlamos con justify-content
  2. Cross Axis: El perpendicular al main que se controla con align-items

¿Ves la flecha de abajo? Nos está indicando en qué dirección está el Main Axis ¡Prueba a pinchar sobre la flecha y observa qué ocurre!

hello

world

👋

!!!

Cuando cambias el Main Axis con flex-direction, estás alterando cómo los elementos fluyen dentro del contenedor flex. Este flujo afecta directamente a cómo se comportan justify-content y align-items, que son las propiedades encargadas de distribuir y alinear los elementos en los ejes.

Jugando con justify-content y align-items

Ahora que tienes claro qué es el Main Axis, vamos a explorar cómo funcionan estas dos propiedades. Podría explicártelo con un ladrillo de texto, pero creo que aprenderás mucho más viéndolo por ti mismo.

hello

world

👋

!!!

  • justify-content: Esta propiedad te permite distribuir los elementos a lo largo del Main Axis. Puedes alinearlos al inicio, al final, centrarlos, o incluso agregar espacio entre ellos. Prueba cada valor y fíjate cómo cambia la posición de los elementos.

  • align-items: Similar a justify-content, pero aplicado al Cross Axis. Esto es útil para alinear elementos verticalmente (o horizontalmente, según el eje principal) y para casos en los que quieres que los elementos se ajusten al tamaño de su contenedor. ¡Prueba el valor stretch! Es una joya para hacer que todos los elementos tengan la misma altura.

¡Ojo con el stretch en align-items! Esto es súper útil cuando quieres que, por ejemplo, todas las tarjetas tengan la misma altura y por desgracia veo que se usa muy poquito.

Algunas combinaciones útiles

Aquí van algunos ejemplos prácticos que puedes probar en el playground:

  • Centrar un div de manera absoluta: Usa justify-content: center y align-items: center. ¡Boom! Div centrado. Fácil, ¿no?
  • Layouts distribuidos uniformemente: Prueba justify-content: space-between o space-around para menús o grids con un diseño limpio y equilibrado.
  • Ajustar elementos a la misma altura: Usa align-items: stretch junto con un height definido en el contenedor.

Conclusión

Flexbox es como ese amigo que siempre tiene una solución para todo. Entender sus dos ejes y cómo trabajan las propiedades principales puede ahorrarte horas de frustración y ayudarte a construir layouts flexibles y hermosos.

Sigue jugando con el FlexPlayground y experimenta con combinaciones. Flexbox no es complicado, solo necesita un poco de práctica. Más adelante os hablaré de otras propiedades como flex, flex-wrap o flex-grow y os presentaré también al hermano mayor de Flexbox, Grid.