title: How to evenly space many inline-block elements?
body: <p>Is it possible to evenly space many elements in a div with changeable width.</p>
  
  <p>Here's <a href="http://jsfiddle.net/ULQwf/293/" rel="noreferrer">not working example</a>. If we use text-align:center; elements will be centered, but margin:0 auto; is not working. I want to accomplish something like justify+center:</p>
  
  <pre><code>|..&lt;elem&gt;..&lt;elem&gt;..&lt;elem&gt;..&lt;elem&gt;..|       // for one container width
  |..&lt;elem&gt;..&lt;elem&gt;..&lt;elem&gt;..|               // for smaller container width
  |....&lt;elem&gt;....&lt;elem&gt;....|                 // even smaller container
  </code></pre>
  
  <p>Container will be user resizable. 
  One picture is worth a 1000 words:  </p>
  
  <p><img src="https://i.stack.imgur.com/yDPQa.png" alt="enter image description here"></p>
  
  <p>Container(red box) width:100%; So user can resize it (browser window, js, whatever).<br>
  &lt;--> represent even spaces. 
  In second row &lt;--> are bigger because there is more room. I was able to fake it with:</p>
  
  <pre><code>text-align:center;
  word-spacing:3em;    // but any fixed value looses proportion
  </code></pre>