Rozmieść przyciski tak równomiernie, jak to możliwe

Question

Posiadam pojemnik o zmiennej szerokości (element div).

Pojemnik ten zawiera zmiennanumer przycisków, których rozmiaryzmieniać.

<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.

Potrzebne jest harmonijne rozmieszczenie przycisków niezależnie od szerokości pojemnika (zakładając, że jest szerszy niż najszerszy przycisk).

Teraz mam to (jeśli dobrze dopasować rozmiar okna):

Co chciałbym to mieć przyciski rozmieszczone w najbardziej nawet możliwy sposób (czyli Szerokości linie, gdy jest więcej niż jeden, jak najbardziej równy). Tutaj oznaczałoby to 3 przyciski na linii:

ale jak przyciski mogą być różnej wielkości liczby mogą też być 2-4 dla przykładu.

Nie chcę rozciągać przycisków ani wymuszać ich szerokości, chcę zachować wiersze wyśrodkowane i nie chcę odpowiedzi opartej na JS (już zrobiłem to w JS), chcę czysty CSS rozwiązanie. Wiem, że byłby to easy in columns, ale nie widzę sposobu na wiersze. Możliwe jest też, że przegapiłem niedawny postęp w CSS (nie dbam o stare przeglądarki i odpowiedź, która nie działa na IE może być akceptowalna), dlatego pytam, nawet jeśli teraz nie wydaje się to możliwe.

Już ustaliłem, że to nie jest trywialny problem, więc nie zawracaj sobie głowy pisaniem odpowiedzi, że nie jest to możliwe.

Answer 1

CSS nie zawiera wystarczającej mocy "matematycznej" (przeglądarki krzyżowej) do określenia szerokości i dostępnej przestrzeni. Gdyby były one podobnie ukształtowane, łatwiej byłoby je zrealizować za pomocą systemu opartego na siatce, takiego jak bootstrap i zapytania o media. Ale ponieważ 15 przycisków "G +" mieści się w przestrzeni 2 "stackoverflow", nigdy nie będzie to rozwiązanie, którego potrzebujesz bez określania szerokości elementów.

Sugerowałbym, aby uzyskać rozwiązanie JS, które już wymyśliłeś.

Answer 2

Jak już mówiłem, myślę, że nie jest to osiągalne z CSS tylko (jeszcze): P

Korzystanie pewne JS, to najlepszym rozwiązaniem mogę myśleć:

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

Obkurcza pojemnik tak długo, jak długo nie rośnie.