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-contenty cómo funcionan o, lo que es más importante , cuándo funcionan.

TL;DR

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

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

• align-itemsefectuar la alineación de los artículos en la línea actual.
• align-contentefectú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 displayvalor 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-directionpropiedad.

— flex-direction:rowsignifica 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:columnsignifica 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-wrappropiedad se establece en nowrap. Por defecto, cada contenedor flexible es un contenedor de una sola línea.
• Contenedores multilínea : Contenedores flexibles cuya flex-wrappropiedad se establece enwrap

TL; DR con nomenclatura

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

• justify-contenttrabaja en el Eje Principal y las align-*propiedades trabajan en el Eje Transversal.
• justify-contenty align-itemsson similares en su comportamiento, la diferencia es que justify-contenttrabajan en el eje principal mientras que align-itemstrabajan en el eje transversal.
• align-contentfunciona 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.