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

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

Answer 2

在我的情况下，其中一个flex项目设置了margin-left: 100px;。删除它可以解决问题。

Answer 3

尝试为您的 ul 添加一个宽度，如果没有宽度，则它们之间没有空间。

flex space-between不起作用

3 个答案: