Flexbox Tutorial

Domina el sistema de layout más popular para diseño web moderno

¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un sistema de diseño unidimensional que facilita la distribución de elementos en una dirección: horizontal (fila) o vertical (columna). Es perfecto para componentes de UI como menús, tarjetas, y layouts responsivos.

1. Flexbox Básico

Para activar Flexbox, simplemente usa display: flex en el contenedor. Por defecto, los elementos se alinean horizontalmente.

.flex-basic { display: flex; }
Item 1
Item 2
Item 3

2. Justify Content (Alineación Horizontal)

justify-content controla cómo se distribuyen los elementos a lo largo del eje principal (horizontal por defecto).

justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
flex-start (por defecto)
1
2
3
center
1
2
3
flex-end
1
2
3
space-between
1
2
3
space-around
1
2
3
space-evenly
1
2
3

3. Align Items (Alineación Vertical)

align-items controla cómo se alinean los elementos en el eje transversal (vertical por defecto).

align-items: flex-start | center | flex-end | stretch | baseline;
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
stretch (por defecto)
1
2
3

4. Flex Direction (Dirección)

flex-direction define la dirección principal de los elementos.

flex-direction: row | column | row-reverse | column-reverse;
row (por defecto)
1
2
3
column
1
2
3
row-reverse
1
2
3

5. Flex Wrap (Ajuste de línea)

flex-wrap controla si los elementos deben ajustarse a nuevas líneas cuando no hay espacio.

flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (por defecto) - Los items se encogen
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
wrap - Los items saltan a nueva línea
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

6. Flex Grow (Crecimiento de items)

flex-grow define cuánto puede crecer un elemento en relación a los demás.

.item-1 { flex-grow: 1; } /* Crece 1 unidad */ .item-2 { flex-grow: 2; } /* Crece 2 unidades (el doble) */ .item-3 { flex-grow: 3; } /* Crece 3 unidades (el triple) */
flex-grow: 1
flex-grow: 2
flex-grow: 3

7. Ejemplo Práctico: Navbar

Un navbar responsive usando Flexbox con justify-content: space-between.

.navbar { display: flex; justify-content: space-between; align-items: center; }

8. Ejemplo Práctico: Cards Responsive

Cards que se ajustan automáticamente usando flex-wrap y flex: 1 1 250px.

.card-container { display: flex; flex-wrap: wrap; gap: 20px; } .card { flex: 1 1 250px; /* Crece, encoge, base 250px */ }
Producto 1

Descripción del producto. Este es un ejemplo de card flexible que se adapta al contenedor.

$99.99
Producto 2

Otro producto con una descripción diferente. Las cards mantienen el mismo tamaño.

$149.99
Producto 3

Tercer producto de ejemplo. Flexbox hace que todo sea responsive automáticamente.

$79.99

9. Centrado Perfecto

La forma más fácil de centrar elementos vertical y horizontalmente.

.perfect-center { display: flex; justify-content: center; align-items: center; min-height: 250px; }

Perfectamente Centrado

Vertical y horizontalmente

10. Holy Grail Layout

Un layout clásico con header, footer, sidebar y contenido principal usando Flexbox anidado.

.holy-grail { display: flex; flex-direction: column; } .holy-grail-body { display: flex; flex: 1; /* Ocupa el espacio disponible */ }

Header

Sidebar

Ancho fijo

Contenido Principal

Este contenido crece para ocupar todo el espacio disponible. Flexbox hace que el sidebar mantenga su ancho fijo mientras el contenido se expande.

Footer

Propiedades de Flexbox - Guía Rápida

Propiedades del Contenedor (Flex Container):

  • display: flex - Activa Flexbox
  • flex-direction - Dirección (row, column, row-reverse, column-reverse)
  • justify-content - Alineación en eje principal (flex-start, center, flex-end, space-between, space-around, space-evenly)
  • align-items - Alineación en eje transversal (flex-start, center, flex-end, stretch, baseline)
  • flex-wrap - Ajuste de línea (nowrap, wrap, wrap-reverse)
  • gap - Espacio entre elementos

Propiedades de los Items (Flex Items):

  • flex-grow - Cuánto puede crecer (número, default: 0)
  • flex-shrink - Cuánto puede encogerse (número, default: 1)
  • flex-basis - Tamaño base (px, %, auto)
  • flex - Shorthand: flex-grow flex-shrink flex-basis
  • align-self - Alineación individual (override de align-items)
  • order - Orden visual (número, default: 0)

Shorthands Útiles:

  • flex: 1 - Equivale a: flex-grow: 1, flex-shrink: 1, flex-basis: 0%
  • flex: auto - Equivale a: flex-grow: 1, flex-shrink: 1, flex-basis: auto
  • flex: none - Equivale a: flex-grow: 0, flex-shrink: 0, flex-basis: auto

Consejos Finales