Распределите кнопки как можно более равномерно

У меня есть контейнер переменной ширины (div).

Этот контейнер содержит переменную число кнопок, чьи размеры меняются.

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

Смотрите скрипт для HTML и тестов.

Я хочу иметь гармоничное распределение кнопок независимо от ширины контейнера (при условии, что он шире, чем самая широкая кнопка).

Сейчас у меня это (если я отрегулирую размер окна):

Я бы хотел, чтобы кнопки были распределены максимально возможными способами (то есть ширины линий, когда их больше, чем возможно). Здесь это будет означать 3 кнопки в строке:

но поскольку кнопки могут быть разных размеров, номера могут также быть 2-4, например.

Я не хочу растягивать кнопки или усиливать их ширину, я хочу, чтобы строки были центрированы, и я не хочу отвечать на JS (я уже делал это в JS), мне нужно чистое решение CSS, Я знаю, что просто в столбцах, но я не вижу пути с строками. Также возможно, что я пропустил недавнее продвижение в CSS (мне не нужны старые браузеры, и ответ, который не работает на IE, может быть приемлемым), почему я спрашиваю, даже если сейчас это кажется невозможным.

Я уже определил это не тривиальную проблему, поэтому не надо писать ответ, говоря, что это невозможно.

Ответ 1

Как я уже говорил, я думаю, что это невозможно с помощью CSS (пока): P

Используя некоторые JS, это лучшее решение, о котором я могу думать:

http://jsfiddle.net/1fz0djvL/

var buttons = document.querySelector(".buttons");

function distribute(){
    buttons.style.width = "auto";
    var height = buttons.offsetHeight;
    do{
        buttons.style.width = buttons.offsetWidth - 1 + "px";
        if(buttons.scrollWidth > buttons.offsetWidth) break;
    }
    while(buttons.offsetHeight == height);
    buttons.style.width = buttons.offsetWidth + 1 + "px";
}
distribute();
window.addEventListener("resize", distribute);

Он сжимает контейнер, если он не растет в высоту.

Ответ 2

CSS не содержит достаточных полномочий "math" (кросс-браузер) для определения ширины и свободного пространства. Если бы они были одинаковой формы, было бы легче выполнить с помощью сетчатой системы, такой как бутстрап и медиа-запросы. Но поскольку кнопки 15 'G +' соответствуют пространству "stackoverflow", это никогда не будет решением, которое вы хотите, без определения ширины элемента.

Я бы предложил, чтобы решение JS вы уже придумали.