css - 将中间 flex 项目的固定位置居中

Question

我在一个弹性容器中有多个弹性项目 justify-content: space-between;

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;

每个弹性项目都是随机的，具有不同的大小。我想要的是中间项目（数字）始终居中

这是我现在取得的成就：

我想要的是（我不希望项目或数字/计时器重叠，因为我希望计时器可读且项目可拖动）：

使用 flexbox 是否可行？或者我应该为每个项目使用固定位置

标签： cssflexbox

Answer 1

我想这可以工作。您有一个包装器，将计数器（或它是什么）放在您的图标列表之外。这是匆忙完成的，但你明白了吗？

z-index 将图标放在计数器上方。

编辑：为徽标进行了拆分。请注意，这是执行此操作的一种可能方式。在您想要的图像中，它似乎更具动态性，为此您可能需要对某些项目（使用它们自己的类）进行绝对定位，我添加了一个示例。

.wrapper {
  position: relative;
  max-width: 20rem;
  background-color: crimson;
}

.counter {
  margin-bottom: .5rem;
  padding: .5rem;
  background-color: gray;
  color: white;
  text-align: center;
}

.logos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: -.5rem;
  z-index: 1;
}

.logos>.logo {
  margin-left: .5rem;
  margin-bottom: .5rem;
}

.logo {
  flex-grow: 1;
  flex-shrink: 0;
  position: relative;
  min-width: 4rem;
  height: 4rem;
  background-color: deepskyblue;
}

.logo-item--ice-cream {
  position: absolute;
  top: 110%;
  right: -2rem;
  width: 2rem;
  height: 2rem;
  background-color: deeppink;
  border-radius: 50%;
}

<div class="wrapper">
  <div class="logos">
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo">
    x
      <span class="logo-item--ice-cream">x</span>
    </span>
  </div>

  <div class="counter">00:20</div>

  <div class="logos">
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
    <span class="logo"></span>
  </div>
</div>