柔性空格之间不起作用

问题描述 投票:9回答:2

我正在尝试使用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

html css css3 flexbox
2个回答
14
投票

您正在寻找justify-content: space-between

justify-content: space-between

Updated Example

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

justify-content

0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.