flexspace-between不起作用

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

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

HTML:

  

    
      
      

        10:30
        0-2
      
      
    
  

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

你在找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;
}