Distribute buttons as evenly as possible

Question

I have a variable width container (a div).

This container contains a variable number of buttons whose sizes vary.

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

See fiddle for HTML and tests.

What I want is to have an harmonious distribution of the buttons whatever the width of the container (assuming it's wider than the widest button).

Right now I have this (if I adjust the window size) :

What I would want is to have the buttons distributed in the most even way possible (that is the widths of the lines, when there is more than one, as equal as possible). Here that would mean 3 buttons per line :

but as buttons can be of various sizes the numbers could also be 2-4 for example.

I don't want to stretch the buttons or force their widths, I want to keep the rows centered, and I don't want a JS based answer (I already did it in JS), I want a pure CSS solution. I know it would be easy in columns but I don't see a way with rows. It's also possible I missed a recent advance in CSS (I don't care for old browsers and an answer which doesn't work on IE might be acceptable) that's why I'm asking even if it doesn't seem possible right now.

I've already determined it's not a trivial problem, so don't bother writing an answer saying it's not possible.