Flexbox: Alinear elementos frente a alinear contenido

Flexbox es increíble. Si has trabajado con CSS moderno, ya sea que esté implementando el suyo propio o utilizando frameworks como Bootstrap & Foundation, es probable que estés utilizando Flexbox para el diseño y la alineación.

Alinear o justificar..esa es la cuestión

Durante mucho tiempo, he estado tratando de averiguar cuál es la diferencia entre align-items , align-content & justify-content y cómo funcionan o, lo que es más importante , cuándo funcionan.

TL;DR

• Si ha configurado su flex-direction en row , entonces justify-content funciona en el eje horizontal y align-* las propiedades funcionan en el eje vertical.
• Si ha establecido su valor flex-direction en column , align-* las propiedades funcionan en el eje horizontal y justify-content funcionan en el eje vertical.

¿Qué separa los elementos de alineación y el contenido de alineación?

• align-items efectuar la alineación de los artículos en la línea actual.
• align-content efectúa la alineación a través de las líneas de un contenedor flexible. Esto significa que esta propiedad no tiene efecto en los contenedores de una sola línea.

El resto del artículo es solo un volcado de cerebro de todo lo que aprendí mientras trataba de averiguar lo anterior.

Nomenclatura

• Flex Container : un elemento en el que el display valor se establece en flex .
• Elementos flexibles : los elementos secundarios directos de los contenedores flexibles se denominan elementos flexibles.
• Eje principal : el eje definido por la flex-direction propiedad.

— flex-direction:row significa que los elementos dentro del contenedor flexible están alineados uno al lado del otro. Técnicamente, estos elementos están alineados a lo largo del eje en línea (al igual que los elementos en línea).

— flex-direction:column significa que los elementos están alineados a lo largo del eje vertical, es decir, uno debajo del otro. Técnicamente llamado eje de bloque (al igual que los elementos del bloque).

• Eje transversal : El eje perpendicular al eje principal se denomina eje transversal.
• Contenedor de línea única : Contenedores flexibles cuya flex-wrap propiedad se establece en nowrap . Por defecto, cada contenedor flexible es un contenedor de una sola línea.
• Contenedores multilínea : Contenedores flexibles cuya flex-wrap propiedad se establece en wrap

TL; DR con nomenclatura

Ahora que conocemos la jerga, podemos reescribir el TL; DR como-

• justify-content trabaja en el Eje Principal y las align-* propiedades trabajan en el Eje Transversal.
• justify-content y align-items son similares en su comportamiento, la diferencia es que justify-content trabajan en el eje principal mientras que align-items trabajan en el eje transversal.
• align-content funciona solo en contenedores de varias líneas y no tiene efecto en contenedores de una sola línea.

Fuentes

1. La documentación de w3.org sobre Flexbox es bastante completa y una buena lectura.
2. Documentación de MDN Flexbox.