title: flex space-between doesn't work
body: <p>I'm trying to center horizontally (img - .info - img) using <code>space-between</code> property. I'm facing a little issue the <code>space-between</code> doesn't add spaces between elements. </p>
  
  <p>I know I'm missing something but I can't figure it out!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
  
    &lt;li class="box-match"&gt;
      &lt;a href="#"&gt;
        &lt;img src="http://lorempixel.com/20/21" class="team1" alt=""&gt;
        &lt;div class="info"&gt;
          &lt;span class="time"&gt;10:30&lt;/span&gt;
          &lt;span class="score"&gt;0-2&lt;/span&gt;
        &lt;/div&gt;
        &lt;img src="http://lorempixel.com/20/20" class="team2" alt=""&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a{
    text-decoration: none;
    width: 98px;
    height: 40px;
    display: flex;
    flex-flow: row no-wrap;
    align-items: center;
    align-content: space-between;
  
    background-color: lightgray;
  }
  
  .info{
    text-align: center;
    display: block;
    width: 40px;
  }
  
  ul{
    list-style: none;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/eldev/pen/EaQJvR?editors=110" rel="noreferrer">http://codepen.io/eldev/pen/EaQJvR?editors=110</a></p>