flex space-between不起作用

Question

我正在尝试使用space-between属性水平居中(img - .info - img).我面临一个小问题,space-between不在元素之间添加空格.

我知道我错过了什么,但我无法理解!

HTML:

<ul>

  <li class="box-match">
    <a href="#">
      <img src="http://lorempixel.com/20/21" class="team1" alt="">
      <div class="info">
        <span class="time">10:30</span>
        <span class="score">0-2</span>
      </div>
      <img src="http://lorempixel.com/20/20" class="team2" alt="">
    </a>
  </li>

</ul>

CSS:

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

http://codepen.io/eldev/pen/EaQJvR?editors=110

Answer 1

你在找justify-content: space-between.

更新的示例

MDN justify-content

CSS justify-content属性定义当在当前行的主轴中对齐flex项时,浏览器如何在元素之间和周围分配可用空间.在应用长度和自动边距之后完成对齐,这意味着,如果存在至少一个flex-grow不同于0的柔性元素,则它将没有效果,因为没有任何可用空间.

a {
  text-decoration: none;
  width: 98px;
  height: 40px;
  display: flex;
  flex-flow: row no-wrap;
  align-items: center;
  justify-content: space-between;
  background-color: lightgray;
}