El secreto mejor guardado de Flexbox

He estado trabajando con Flexbox durante los últimos meses y me encanta lo fácil e intuitivo que es hasta en los diseños más complejos. Mi CSS estaba libre de intrusiones, mi marcado era lógico y estaba en orden, y parecía que podía colocar cualquier cosa en cualquier lugar (alinear elementos: centro; ¡FTW!). Ese sentimiento llegó a un abrupto final el día en que me hice la siguiente pregunta: "¿Cómo anulo justify-content para colocar un elemento flexible de forma independiente a lo largo del eje principal?". Intentaba espaciar los elementos de forma pareja a lo largo del eje principal. de una fila con el último elemento flotando todo el camino hacia el lado derecho. Estaba perplejo de cómo hacer esto sin flotadores o márgenes fijos.

He leído muchos artículos sobre Flexbox, lo he usado en producción e incluso he dado algunas charlas técnicas sobre el tema y me pareció que faltaba algo. Todos los artículos sobre el tema explicaron cómo Align-Self puede anular alinear elementos en el eje transversal, pero ninguno mostró cómo se puede hacer lo mismo en el eje principal. Estaba a punto de aceptar que era simplemente imposible hacerlo sin atacar, cuando un amigo mío (que había leído toda la especificación de diseño de caja flexible de CSS) me preguntó si estaba usando márgenes automáticos. Los márgenes automáticos no son nada nuevos para CSS, por supuesto, pero cuando se combina con Flexbox, ¡sucede algo mágico!

"TL; DR Flexbox y los márgenes automáticos se crearon el uno para el otro".