tengo unancho variable contenedor (un div).

Este contenedor contiene unvariable número de botones cuyatamaños variar.

<div class="buttons">
        <button>Reddit</button>
        <button>G+</button>
        <button>Facebook</button>
        <button>Stack Exchange</button>
        <button>Twitter</button>
        <button>Steam</button>
</div>

Ver violín para HTML y pruebas.

Lo que quiero es tener una distribución armoniosa de los botones independientemente del ancho del contenedor (suponiendo que sea más ancho que el botón más ancho).

En este momento tengo esto (si ajusto el tamaño de la ventana):

Lo que me gustaría es que los botones se distribuyan de la manera más uniforme posible (es decir, los anchos de las líneas, cuando hay más de uno, lo más iguales posible). Aquí eso significaría 3 botones por línea:

pero como los botones pueden ser de varios tamaños, los números también pueden ser 2-4, por ejemplo.

No quiero estirar los botones ni forzar sus anchos, quiero mantener las filas centradas, y no quiero una respuesta basada en JS (ya lo hice en JS), quiero una solución CSS pura. Se que seriafácil en columnas pero no veo un camino con filas. También es posible que me haya perdido un avance reciente en CSS (no me interesan los navegadores antiguos y una respuesta que no funciona en IE podría ser aceptable) es por eso que pregunto incluso si no parece posible en este momento.

Ya he determinado que no es un problema trivial, así que no te molestes en escribir una respuesta diciendo que no es posible.