尽可能均匀地分布按钮

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解决方案。