Evenly space list items vertically
<p>I am trying to find a way with CSS to evenly space list items vertically.</p>

<p>I want each list item to have a fixed height that doesn't change.  I want the margin in between each list item to automatically strecth so it has the same amount of space but margin:auto; is not working.</p>

<p>Here is snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  border: 1px solid black;
  height: 500px;
  width: 400px;
}

.spaced {
  padding: 0;
  list-style: none;
}
.spaced li {
  border: 1px solid blue;
  height: 60px;
  margin: 15px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;ul class="spaced"&gt;
    &lt;li&gt;item &lt;/li&gt;
    &lt;li&gt;item &lt;/li&gt;
    &lt;li&gt;item &lt;/li&gt;
    &lt;li&gt;item &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>So with this snippet I need it so the blue boxes will remain the same height and be spaced evenly vertically.  If the black box changes in height then the blue boxes will still be evenly spaced.</p>

<p>How can I do this?</p>