柔性空格之间不起作用

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。

justify-content: space-between

Updated Example

CSS MDN justify-content属性定义当在当前行的主轴上对齐弹性项目时，浏览器如何在元素之间及其周围分配可用空间。对齐是在应用长度和自动页边距之后完成的，这意味着，如果至少有一个柔性元素，且justify-content不同于0，则将没有效果，因为将没有任何可用空间。

justify-content

Answer 2

在我的情况下，其中一个弹性项目设置为flex-grow。删除它可以解决问题。