Flexbox

Antes de flexbox, centrar una caja en vertical requería trucos. Con display: flex bastan dos declaraciones: justify-content y align-items.

Una fila o una columna

Flexbox, el módulo CSS Flexible Box Layout, coloca un grupo de cajas a lo largo de una línea. Pon display: flex en un contenedor y sus hijos directos, los elementos flex, se alinean uno al lado del otro en lugar de apilarse. Esa sola declaración basta para una barra de menú, una fila de botones o una tarjeta cuyo pie debe quedar pegado abajo. Flexbox trabaja en una dimensión a la vez: o una fila o una columna. Cuando necesitas filas y columnas a la vez, grid, de la unidad siguiente, suele ser la mejor herramienta.

Dos ejes

En flexbox todo se describe en función de dos ejes. El eje principal es la dirección en la que fluyen los elementos, y lo fija flex-direction: row (el valor predeterminado) o column. El eje transversal forma un ángulo recto con él. justify-content reparte los elementos a lo largo del eje principal: flex-start, center, flex-end, space-between (el primer y el último elemento en los bordes, con espacios iguales entre ellos) o space-around. align-items los coloca en el eje transversal: stretch (el valor predeterminado, todos tan altos como el más alto), flex-start, center o flex-end. Así, una caja queda centrada en las dos direcciones con justify-content: center y align-items: center.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Espacios y salto de línea

gap pone espacio entre los elementos sin agregar nada en los bordes exteriores, que es lo que normalmente quieres y lo que con márgenes resulta incómodo. Por defecto, los elementos flex se quedan en una sola línea y se encogen para caber, aunque eso los aplaste. flex-wrap: wrap les permite pasar a una línea nueva cuando no hay espacio suficiente, así que una fila de cuatro tarjetas en una laptop puede convertirse en dos filas de dos en una tableta y en una sola columna en un celular, sin ninguna media query.

Cómo crecen y se encogen los elementos

La forma abreviada flex de un elemento acepta tres valores. flex-grow dice cuánto del espacio sobrante toma el elemento en comparación con sus hermanos; flex-shrink dice con qué facilidad se encoge cuando falta espacio; flex-basis es su tamaño inicial antes de crecer o encogerse. flex: 1 1 200px significa empezar en 200 píxeles y luego repartir el espacio extra por igual con los demás elementos que también tengan un grow de 1. flex: 1 solo es la forma corta de 1 1 0%, que hace que todos los elementos tengan el mismo ancho. Dale a un elemento flex-grow: 2 y a los demás 1, y tomará el doble que ellos del espacio sobrante.

Orden visual y orden real

Flexbox puede cambiar el orden en que aparecen los elementos, con flex-direction: row-reverse o con la propiedad order, sin tocar el HTML. Úsalo con cuidado. El foco del teclado y los lectores de pantalla siguen el orden del HTML, así que si la pantalla muestra Contact antes que Home pero Tab pasa primero por Home, quien usa el teclado se pierde. Cuando el orden importa para el significado, cámbialo en el HTML.