Flexbox tiene dos partes: el contenedor, con display: flex, y sus elementos hijos directos, que se acomodan solos siguiendo las reglas del contenedor.

Flexbox has two parts: the container, with display: flex, and its direct children, which arrange themselves following the container's rules.

justify-content ordena en la dirección en la que van los elementos —por defecto, horizontal—. Es la propiedad que más vas a tocar.

justify-content arranges things along the direction items flow — by default, horizontal. It is the property you will touch most.

align-items ordena en la dirección perpendicular: si justify-content mueve horizontal, align-items mueve vertical.

align-items arranges things along the perpendicular direction: if justify-content moves horizontally, align-items moves vertically.

Con flex-grow en un elemento hijo, le dices cuánto del espacio sobrante debe tomar, en proporción a los demás.

With flex-grow on a child element, you tell it how much of the leftover space to take, proportional to the others.

El segundo item, con flex-grow: 2, toma el doble de espacio sobrante que el primero. El tercero, sin flex-grow, se queda con su tamaño natural. Este es el truco detrás de barras de navegación donde un solo elemento "empuja" a los demás hacia los bordes.

The second item, with flex-grow: 2, takes twice the leftover space of the first. The third, with no flex-grow, keeps its natural size. This is the trick behind navigation bars where a single element "pushes" the rest toward the edges.

Cómo activar flexbox, ordenar en el eje principal con justify-content, en el eje cruzado con align-items, y repartir espacio sobrante con flex-grow.

Ahora, algo que ya usa este mismo sitio: variables CSS y cómo detectar el modo oscuro del visitante.

How to turn on flexbox, arrange along the main axis with justify-content, the cross axis with align-items, and share leftover space with flex-grow.

Now, something this very site already uses: CSS variables and detecting a visitor's dark mode.