title: Flexbox - How to do space-around in vertical?
body: <p>Probably it's a noob question, but I'm wondering how it's possible do something similar "space-around" but in vertical direction.</p>
  
  <p>This:
  Half-pad 
  Element 
  pad 
  Element
  pad 
  Element 
  half-pad</p>
  
  <p>This: <br /> Half-pad <br /> Element <br /> pad <br /> Element <br /> pad  <br /> Element  <br />half-pad</p>
  
  <p>I'm missing how to do half-pad too.</p>
  
  <p>Doing direction: vertical misses initial and end space-around. </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>.stabled {
    position: fixed;
    right:0px;
    top:0;
    width:15px;
    height:100%;
    z-index:95;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
     
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
  }
  
  .stabled ul {
   position:relative;
   display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
   
   -webkit-flex-direction:column;
   flex-direction:column;
   
   height:100%;
   width:170px;
  }
  
  
  nav.stabled ul li {
   position:relative;
   float:left;
   margin: 0 auto;
   }
   
   
  .stabled li.firl {
   padding-left:0;
   padding-top:35px;
   }
  
  
  .stabled:hover {
    position: fixed;
    width:170px;
    box-shadow: 0 0 10px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
  }</code></pre>
  </div>
  </div>
  </p>