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.

Updated Example

MDN justify-content

The CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with flex-grow different than 0, it will have no effect as there won't be any available space.

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

Answer 2

在我的例子中，其中一个弹性项目有一个 margin-left: 100px; 集。删除它解决了问题。

Answer 3

尝试为您的 ul 添加宽度，如果没有宽度，则 space 介于两者之间。

flex space-between 不起作用

flex space-between doesn't work

html

css

flexbox