盡可能均勻地分布按鈕

Question

我有一個可變寬度的容器（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不起作用的答案可能是可以接受的）這就是為什么我要問即使它現在似乎不可能。

我已經確定這不是一個微不足道的問題，所以不要費心寫一個答案說這是不可能的。

Answer 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);

只要它不高度增長，它就會收縮容器。

Answer 2

CSS沒有足夠的“數學”功能（跨瀏覽器）來確定寬度和可用空間。 如果它們具有相似的形狀，則使用基於網格的系統（如引導程序和媒體查詢）更容易實現。 但是因為15'G +'按鈕適合2'stackoverflow'空間，所以如果不確定元素寬度，它將永遠不會是您想要的解決方案。

我建議你已經提出了JS解決方案。