Flexbox es una herramienta de CSS que permite distribuir y alinear elementos dentro de un contenedor de forma sencilla.
Su nombre viene de Flexible Box, que puede traducirse como caja flexible. Se utiliza principalmente en contenedores para controlar cómo se organizan los elementos que están dentro.
Qué es Flexbox
Flexbox permite convertir un elemento en una caja flexible usando la propiedad display: flex.
Esto no se aplica directamente a los elementos internos, sino al contenedor que los agrupa.
nav { display: flex; }Al aplicar display: flex, los elementos internos se colocan por defecto en una misma línea horizontal.
Cómo funciona Flexbox
Flexbox trabaja con dos ejes:
- Eje principal: por defecto va de izquierda a derecha.
- Eje cruzado: va en dirección contraria al eje principal.
Si el eje principal es horizontal, el eje cruzado será vertical.
Estos ejes pertenecen al contenedor que tiene aplicado display: flex.
Alinear elementos en el eje principal
Para alinear elementos en el eje principal se utiliza justify-content.
nav { display: flex; justify-content: center; }Algunos valores comunes son:
flex-start: alinea los elementos al inicio.center: centra los elementos.flex-end: alinea los elementos al final.space-around: distribuye espacio alrededor de los elementos.space-between: distribuye los elementos hasta los bordes del contenedor.
Alinear elementos en el eje cruzado
Para alinear elementos en el eje cruzado se utiliza align-items.
nav { display: flex; align-items: center; }Esta propiedad es útil cuando el contenedor tiene altura y queremos centrar los elementos verticalmente.
Cambiar la dirección con flex-direction
Por defecto, Flexbox organiza los elementos en fila mediante row.
nav { display: flex; flex-direction: row; }También podemos cambiar la dirección a columna:
nav { display: flex; flex-direction: column; }Cuando usamos column, el eje principal pasa a ser vertical y el eje cruzado pasa a ser horizontal.
Separar elementos con gap
La propiedad gap permite añadir espacio entre los elementos internos del contenedor.
nav { display: flex; gap: 10px; }En este ejemplo, cada elemento queda separado por 10 píxeles.
Ejemplo con un header
Podemos aplicar Flexbox a un header para distribuir dos menús o bloques de navegación.
header { display: flex; justify-content: space-between; align-items: center; } nav { display: flex; align-items: center; gap: 10px; }Con esta configuración, los elementos del header se distribuyen hacia los extremos y quedan alineados verticalmente al centro.
Usar margin-right: auto
En algunos casos, podemos empujar un elemento hacia un lado usando margin-right: auto.
header nav:first-of-type { margin-right: auto; }Esto hace que el primer nav tome el espacio disponible hacia la derecha y empuje los demás elementos.
Crear tarjetas con Flexbox
Flexbox también puede utilizarse para organizar tarjetas en una cuadrícula sencilla.
Supongamos que tenemos una sección con varias tarjetas:
<section> <div>Tarjeta 1</div> <div>Tarjeta 2</div> <div>Tarjeta 3</div> <div>Tarjeta 4</div> </section>Podemos aplicar Flexbox al contenedor:
section { display: flex; gap: 20px; max-width: 800px; margin: auto; }Esto coloca las tarjetas en una misma fila y separa cada una con 20 píxeles.
Permitir salto de línea con flex-wrap
Cuando los elementos no caben en una sola línea, podemos permitir que bajen a la siguiente usando flex-wrap.
section { display: flex; flex-wrap: wrap; gap: 20px; max-width: 800px; margin: auto; }Luego podemos definir el ancho de cada tarjeta:
section div { width: 45%; }Con este ancho, pueden entrar dos tarjetas por fila, dejando espacio para el gap.
Centrar las tarjetas
Para centrar las tarjetas dentro del contenedor, podemos usar justify-content: center.
section { display: flex; flex-wrap: wrap; gap: 20px; max-width: 800px; margin: auto; justify-content: center; }Ejemplo completo
section { display: flex; flex-wrap: wrap; gap: 20px; max-width: 800px; margin: auto; justify-content: center; } section div { width: 45%; }Conclusión
Flexbox permite distribuir elementos de manera flexible dentro de un contenedor.
Con propiedades como display: flex, justify-content, align-items, flex-direction, gap y flex-wrap, es posible alinear menús, organizar tarjetas y crear estructuras más limpias en una página web.
