Flexbox es un módulo de CSS que permite organizar elementos dentro de un contenedor de una forma sencilla y flexible.
Con Flexbox puedes alinear cajas, distribuir espacios, cambiar la dirección de los elementos, controlar si bajan a otra línea y ordenar componentes sin tener que depender de trucos antiguos de CSS.
La idea principal es tener un contenedor padre y varios elementos hijos. Al activar Flexbox en el contenedor, los hijos pasan a organizarse siguiendo las reglas flexibles que definamos.
Qué es Flexbox en CSS
Flexbox sirve para crear layouts de una dimensión.
Eso significa que trabaja muy bien cuando quieres organizar elementos en una fila o en una columna.
Por ejemplo, puedes usar Flexbox para crear menús, tarjetas, botones alineados, barras de navegación, secciones centradas o grupos de elementos que necesitan ajustarse al espacio disponible.
Estructura básica para usar Flexbox
Para usar Flexbox necesitas un contenedor y elementos dentro de ese contenedor.
Un ejemplo básico en HTML sería este:
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> </div>El contenedor sería el elemento padre y las cajas serían los elementos hijos.
Activar Flexbox con display flex
Para activar Flexbox, debes aplicar display: flex; al contenedor.
.container { display: flex; }Cuando haces esto, los elementos hijos cambian automáticamente su comportamiento.
Por defecto, Flexbox los coloca en una fila horizontal, de izquierda a derecha.
Ejemplo de estilos básicos
Antes de probar las propiedades de Flexbox, puedes usar estilos simples para ver mejor cada caja.
.container { display: flex; background: #f2f2f2; border: 2px solid #ccc; padding: 10px; } .box { border: 2px solid #333; padding: 20px; margin: 5px; text-align: center; }Estos estilos no son lo importante de Flexbox, pero ayudan a visualizar el contenedor y los elementos.
flex-direction: cambiar la dirección de los elementos
La propiedad flex-direction define la dirección en la que se colocan los elementos dentro del contenedor.
Por defecto, el valor es row, es decir, una fila horizontal.
.container { display: flex; flex-direction: row; }También puedes usar column para colocar los elementos de forma vertical.
.container { display: flex; flex-direction: column; }Valores comunes de flex-direction
row: coloca los elementos en fila de izquierda a derecha.row-reverse: coloca los elementos en fila, pero en orden inverso.column: coloca los elementos en columna de arriba hacia abajo.column-reverse: coloca los elementos en columna, pero en orden inverso.
row-reverse y column-reverse
Si usas row-reverse, el último elemento puede aparecer primero y el primero puede pasar al final.
.container { display: flex; flex-direction: row-reverse; }Con column-reverse ocurre algo parecido, pero en vertical.
.container { display: flex; flex-direction: column-reverse; }Esto puede ser útil cuando necesitas cambiar el orden visual sin modificar directamente el HTML.
flex-wrap: permitir que los elementos bajen de línea
Por defecto, Flexbox intenta colocar todos los elementos en una sola línea.
Si hay muchos elementos y no caben, pueden reducir su tamaño para intentar mantenerse en esa misma fila.
Para permitir que los elementos bajen a otra línea, se usa flex-wrap.
.container { display: flex; flex-wrap: wrap; }Con esto, si las cajas no caben en una fila, pasarán a la siguiente línea.
Valores comunes de flex-wrap
nowrap: valor por defecto. No permite que los elementos bajen a otra línea.wrap: permite que los elementos bajen a otra línea si no caben.wrap-reverse: permite el salto de línea, pero invierte el orden de las líneas.
Ejemplo con flex-wrap
Si cada caja tiene un ancho fijo, puede que no todas quepan en la misma fila.
.box { width: 150px; }Si el contenedor tiene flex-wrap: wrap;, las cajas mantendrán su ancho y bajarán a una nueva línea cuando sea necesario.
.container { display: flex; flex-wrap: wrap; }flex-flow: resumir dirección y salto de línea
flex-flow es una propiedad abreviada que combina flex-direction y flex-wrap.
En lugar de escribir dos propiedades separadas, puedes escribirlas en una sola línea.
.container { display: flex; flex-flow: row wrap; }También puedes usarlo con columna:
.container { display: flex; flex-flow: column wrap; }Esto indica que los elementos se colocarán en columna y que podrán ajustarse si no caben.
justify-content: alinear elementos en el eje principal
La propiedad justify-content permite alinear los elementos en el eje principal.
Si la dirección es row, el eje principal es horizontal.
Por ejemplo, para centrar los elementos horizontalmente:
.container { display: flex; justify-content: center; }Valores comunes de justify-content
flex-start: alinea los elementos al inicio.flex-end: alinea los elementos al final.center: centra los elementos.space-between: deja espacio entre los elementos.space-around: deja espacio alrededor de los elementos.space-evenly: distribuye el espacio de forma más uniforme.
Diferencia entre space-between y space-around
space-between deja espacio entre los elementos, pero no necesariamente en los extremos del contenedor.
.container { display: flex; justify-content: space-between; }space-around reparte espacio alrededor de cada elemento.
.container { display: flex; justify-content: space-around; }Esto hace que también exista espacio alrededor de las cajas, no solo entre ellas.
align-items: alinear elementos en el eje cruzado
align-items se usa para alinear los elementos en el eje cruzado.
Si los elementos están en una fila, el eje cruzado es vertical.
Para ver mejor el efecto, puedes darle una altura al contenedor:
.container { display: flex; height: 500px; align-items: center; }Con esto, las cajas se alinean verticalmente al centro del contenedor.
Valores comunes de align-items
flex-start: alinea los elementos arriba.flex-end: alinea los elementos abajo.center: centra los elementos verticalmente.stretch: estira los elementos para ocupar el espacio disponible.baseline: alinea los elementos según la línea base del texto.
baseline: alinear según el texto
El valor baseline es útil cuando tienes elementos con textos de diferentes tamaños.
Por ejemplo, si una caja tiene una fuente más grande que las demás, baseline intenta alinear los textos sobre una misma línea imaginaria.
.container { display: flex; align-items: baseline; }Esto ayuda a que los elementos se vean más ordenados aunque tengan tamaños de fuente diferentes.
align-self: alinear un elemento individual
align-self permite cambiar la alineación de un solo elemento sin afectar a los demás.
Por ejemplo, si todo el contenedor tiene align-items: flex-start;, puedes hacer que una caja específica se alinee abajo.
.container { display: flex; height: 500px; align-items: flex-start; } .box-special { align-self: flex-end; }De esta forma, el elemento con la clase box-special sobrescribe la alineación general del contenedor.
align-content: controlar el espacio entre varias líneas
align-content sirve para controlar cómo se distribuye el espacio entre varias líneas de elementos.
Para que se note, normalmente necesitas tener flex-wrap: wrap; y suficiente altura en el contenedor.
.container { display: flex; flex-wrap: wrap; height: 500px; align-content: center; }Con esto, las líneas de elementos se agrupan hacia el centro.
Valores comunes de align-content
flex-start: agrupa las líneas arriba.flex-end: agrupa las líneas abajo.center: agrupa las líneas al centro.stretch: estira las líneas para ocupar el espacio.space-between: deja espacio entre las líneas.space-around: deja espacio alrededor de las líneas.
order: cambiar el orden visual de los elementos
La propiedad order permite cambiar el orden visual de los elementos flexibles.
Por ejemplo, puedes hacer que la caja 4 aparezca primero y la caja 1 aparezca al final.
.box-1 { order: 4; } .box-2 { order: 2; } .box-3 { order: 3; } .box-4 { order: 1; }Esto cambia el orden visual sin tener que mover los elementos en el HTML.
flex-grow: permitir que un elemento crezca
flex-grow define cuánto puede crecer un elemento en relación con los demás.
Si todos los elementos tienen flex-grow: 1;, todos intentarán ocupar el mismo espacio disponible.
.box { flex-grow: 1; }Si a una caja le das un valor mayor, ocupará más espacio que las demás.
.box-special { flex-grow: 3; }Esto significa que esa caja tendrá más prioridad para crecer dentro del contenedor.
flex-shrink: controlar cuánto puede reducirse un elemento
flex-shrink controla si un elemento puede reducir su tamaño cuando no hay suficiente espacio.
Por defecto, los elementos flexibles pueden achicarse si el contenedor no tiene espacio suficiente.
Si quieres evitar que un elemento se reduzca, puedes usar:
.box-special { flex-shrink: 0; }Con esto, esa caja mantiene su tamaño y los demás elementos tendrán que ajustarse si falta espacio.
Ejemplo completo de Flexbox
Este ejemplo reúne varias propiedades básicas de Flexbox.
.container { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: space-around; height: 500px; background: #f2f2f2; border: 2px solid #ccc; padding: 10px; } .box { width: 150px; padding: 20px; margin: 5px; border: 2px solid #333; text-align: center; } .box-special { order: 1; flex-grow: 2; align-self: flex-end; }Con este código, el contenedor organiza las cajas en filas, permite que bajen de línea, las centra y controla el espacio entre ellas.
Cuándo usar Flexbox
Flexbox es muy útil cuando quieres organizar elementos en una sola dirección.
Por ejemplo:
- Menús de navegación.
- Botones alineados.
- Tarjetas en una fila.
- Elementos centrados vertical y horizontalmente.
- Componentes pequeños dentro de una sección.
- Layouts simples y medianos.
Flexbox vs CSS Grid
Flexbox y CSS Grid no son enemigos. Ambos sirven para crear layouts, pero se usan en situaciones diferentes.
Flexbox funciona muy bien para organizar elementos en una dimensión: fila o columna.
CSS Grid es más útil cuando necesitas trabajar con filas y columnas al mismo tiempo, especialmente en layouts más grandes o complejos.
Una forma sencilla de verlo es esta:
- Flexbox: ideal para componentes y alineaciones en una dirección.
- CSS Grid: ideal para estructuras completas de página con filas y columnas.
Tabla rápida de propiedades Flexbox
| Propiedad | Dónde se aplica | Para qué sirve |
|---|---|---|
| display: flex | Contenedor | Activa Flexbox. |
| flex-direction | Contenedor | Define si los elementos van en fila o columna. |
| flex-wrap | Contenedor | Permite que los elementos bajen a otra línea. |
| flex-flow | Contenedor | Combina direction y wrap. |
| justify-content | Contenedor | Alinea los elementos en el eje principal. |
| align-items | Contenedor | Alinea los elementos en el eje cruzado. |
| align-content | Contenedor | Distribuye el espacio entre varias líneas. |
| align-self | Elemento hijo | Cambia la alineación de un elemento individual. |
| order | Elemento hijo | Cambia el orden visual de los elementos. |
| flex-grow | Elemento hijo | Define cuánto puede crecer un elemento. |
| flex-shrink | Elemento hijo | Define cuánto puede reducirse un elemento. |
Conclusión
Flexbox es una de las herramientas más importantes de CSS para crear layouts modernos.
Con solo aplicar display: flex; al contenedor, puedes empezar a controlar la dirección, alineación, orden, crecimiento y ajuste de los elementos hijos.
Las propiedades más importantes para empezar son flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-grow y flex-shrink.
Si estás aprendiendo CSS, dominar Flexbox te ayudará a crear menús, tarjetas, secciones centradas y componentes responsive de una forma mucho más simple.
Después de aprender Flexbox, el siguiente paso natural es aprender CSS Grid para crear estructuras más grandes y completas.
