#15 Flexbox: cajas en fila#15 Flexbox: cajas en fila

El problema que resuelve

Durante años, poner tres cajas una al lado de la otra, o centrar algo en vertical, era sorprendentemente difícil en CSS. Flexbox (de flexible box, caja flexible) lo resolvió. Hoy es la herramienta que más usarás para colocar cosas: menús, cabeceras, botones con icono, tarjetas en fila…

Contenedor y elementos

Flexbox siempre funciona con dos niveles:

• El contenedor flex: el padre, al que le pones display: flex.
• Los elementos flex: sus hijos directos, que se colocan solos en fila.

1
2
3
4
5

Los dos ejes

Flexbox piensa en dos ejes:

• El eje principal (main axis): la dirección en la que se colocan los elementos. En una fila, horizontal.
• El eje cruzado (cross axis): el perpendicular. En una fila, vertical.

           eje principal →
        ┌──────────────────────────┐
  eje   │ [ 1 ]  [ 2 ]  [ 3 ]      │
cruzado │                          │
   ↓    └──────────────────────────┘

Hay una propiedad para cada eje, y entenderlo es la clave de Flexbox.

Repartir: justify-content (eje principal)

1
2
3
4
5
6
7
8
9
10

(En este ejemplo usamos el atributo style solo para poner las cinco variantes juntas; en tus proyectos, mejor con clases.)

Alinear: align-items (eje cruzado)

Cuando los elementos tienen alturas distintas, o el contenedor es más alto que ellos, align-items decide cómo se alinean en vertical:

1
2
3
4
5

Por defecto es stretch: todos se estiran hasta la altura del contenedor. Por eso, a veces, al poner display: flex las cajas se vuelven todas igual de altas.

Separar: gap

gap pone un hueco entre los elementos (nunca en los extremos). Es mucho más cómodo que los márgenes:

.contenedor {
  display: flex;
  gap: 16px;
}

Las tres líneas más famosas de CSS

Centrar algo en horizontal y en vertical:

1
2
3

Dirección: flex-direction

Con flex-direction: column los elementos se colocan en columna. Y ojo: los ejes se intercambian. Ahora el principal es el vertical, así que justify-content trabaja en vertical y align-items en horizontal.

.lateral {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

¿Para qué una columna, si los bloques ya se apilan? Por gap, por el centrado y por poder cambiar de fila a columna según el tamaño de pantalla, como verás en la lección de responsive.

Cuando no caben: flex-wrap

Por defecto, Flexbox intenta meter todos los elementos en una sola fila, aunque tenga que encogerlos. Con flex-wrap: wrap, los que no caben bajan a la línea siguiente:

1
2
3

Que un elemento crezca: flex: 1

Las propiedades anteriores van en el contenedor. Hay una muy útil que va en un elemento: flex: 1 le dice que crezca para ocupar el espacio libre.

1
2
3
4

El botón mide lo que necesita y el campo de búsqueda se estira para ocupar el resto. Si varios elementos tienen flex: 1, se reparten el espacio a partes iguales.

El patrón de la cabecera

Juntando todo, la cabecera que tienen la mayoría de webs:

1
2
3
4
5
6
7
8
9
10

Errores típicos

• Poner display: flex en los hijos en lugar de en el padre.
• Esperar que afecte a los nietos. Flexbox solo coloca a los hijos directos.
• Confundir los ejes: usar align-items para repartir en horizontal en una fila, o no darse cuenta de que en column se intercambian.
• Querer centrar en vertical sin que el contenedor tenga altura.
• Usar márgenes para separar cuando gap lo hace mejor.
• Olvidar flex-wrap: wrap y que los elementos se aplasten en pantallas pequeñas.

Ejercicios

Ejercicio 1: tres tarjetas en fila (fácil)

Pon las tres tarjetas en fila, con 20px de separación entre ellas.

1
2
3
4
5

.planes {
  display: flex;
  gap: 20px;
}

Ejercicio 2: el pie de página (medio)

Coloca el texto del copyright a la izquierda y los enlaces a la derecha, centrados en vertical, con 12px entre los enlaces.

1
2
3
4
5
6
7
8

.pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #222;
  color: white;
  font-family: sans-serif;
}

.redes {
  display: flex;
  gap: 12px;
}

Ejercicio 3: la portada centrada (reto)

Haz una portada de 400px de alto con un fondo de color, y en su centro exacto un título y un botón uno debajo del otro, separados 16px.

1
2
3
4

.portada {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: 400px;
  background: #ffd6a5;
}

.portada h1 {
  margin: 0;
}

Ficha resumen

• display: flex en el padre; sus hijos directos se colocan en fila.
• Eje principal (horizontal en fila) → justify-content. Eje cruzado (vertical en fila) → align-items.
• gap separa los elementos. flex-wrap: wrap los deja bajar de línea.
• flex-direction: column los pone en columna (y se intercambian los ejes).
• flex: 1 en un hijo: crece para ocupar el espacio libre.
• Centrar: display: flex; justify-content: center; align-items: center; (con altura).

Glosario