检测 flexbox 元素之间的 mouseover 和 mousedown 事件

Question

我有以下 HTML/CSS：

.item {
  border: 1px solid gray;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

.flex-row {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

<div class="flex-row">
    <div class="item" style="width: 25%;">
        25%
    </div>
    <div class="item" style="width: 25%;">
        25%
    </div>
    <div class="item" style="width: 10%;">
        10%
    </div>
    <div class="item" style="width: 20%;">
        20%
    </div>
    <div class="item" style="width: 20%;">
        20%
    </div>
</div>

<div class="flex-row">
    <div class="item" style="width: 50%;">
        50%
    </div>
    <div class="item" style="width: 18%;">
        18%
    </div>
    <div class="item" style="width: 12%;">
        12%
    </div>
    <div class="item" style="width: 20%;">
        20%
    </div>
</div>

（注意，我的项目中实际上并没有上面的代码，它是由ngFor中的angular生成的，但这无关紧要。）

我想在可以检测悬停和 mousedown 事件的 flexbox 中的这些 div 之间插入间距，如下所示：

.item {
  border: 1px solid gray;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

.spacer {
  width: 25px;
}

.spacer:hover {
  cursor: pointer;
  background-color: blue;
}

.flex-row {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

<div class="flex-row">
    <div class="item" style="width: 25%;">
        25%
    </div>

    <div class="spacer" (mousedown)="someFunction()"></div>

    <div class="item" style="width: 25%;">
        25%
    </div>

    <div class="spacer" (mousedown)="someFunction()"></div>

    <div class="item" style="width: 10%;">
        10%
    </div>

    <div class="spacer" (mousedown)="someFunction()"></div>

    <div class="item" style="width: 20%;">
        20%
    </div>

    <div class="spacer" (mousedown)="someFunction()"></div>

    <div class="item" style="width: 20%;">
        20%
    </div>
</div>

<div class="flex-row">
    <div class="item" style="width: 50%;">
        50%
    </div>

    <div class="spacer" (mousedown)="someFunction()"></div>

    <div class="item" style="width: 18%;">
        18%
    </div>

    <div class="spacer" (mousedown)="someFunction()"></div>

    <div class="item" style="width: 12%;">
        12%
    </div>

    <div class="spacer" (mousedown)="someFunction()"></div>

    <div class="item" style="width: 20%;">
        20%
    </div>
</div>

（再次提醒，这里不用担心(mousedown)调用的语法，只要知道我点击空格键就想调用一个函数）

这里的问题是垫片破坏了弹性盒的流动（如预期的那样）。两个 25% 的元素不再与后面一行的 50% 元素完美对齐。

我发现使用border-box 可以很容易地在弹性元素之间放置空格并保持对齐，但我无法弄清楚如何在不破坏布局的情况下额外跟踪空格上的鼠标悬停/单击事件。

Answer 1

注意：这里的第一个代码 sn-p 是非功能性，因为它依赖于一个实验性功能，该功能恰好具有 零 浏览器支持。这可能会在未来的某个时候起作用，或者该功能可能会在它到达浏览器之前被废弃。它不应该用于生产（或开发或 QA），因为它会退回到width: auto。话虽如此，我想包含它，因为我已经花时间编写它，一旦实现它可能会有所帮助。

---

理想

最优雅的语法解决方案是使用 CSS attr property 从 HTML 属性中提供的宽度中减去。不幸的是，这是not yet supported anywhere，所以这个策略不起作用。如果代码受支持，这就是代码的样子。

.item {
  border: 1px solid gray;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
  /* If this was supported, it would be great. */
  width: calc(attr(data-width length, 25px) - 25px);
}

.item:last-child {
  width: calc(attr(data-width length));
}

.flex-row {
  width: 100%;
  display: flex;
  margin-top: 10px;
}

.spacer {
  width: 25px;
}

.spacer:hover {
  cursor: pointer;
  background-color: blue;
}

<h1>This does not work because<br>attr is not fully supported :(</h1>

<div class="flex-row">
  <div class="item" data-width="25%">25%</div>
  <div class="spacer"></div>
  <div class="item" data-width="25%">25%</div>
  <div class="spacer"></div>
  <div class="item" data-width="10%">10%</div>
  <div class="spacer"></div>
  <div class="item" data-width="20%">20%</div>
  <div class="spacer"></div>
  <div class="item" data-width="20%">20%</div>
</div>

<div class="flex-row">
  <div class="item" data-width="50%">50%</div>
  <div class="spacer"></div>
  <div class="item" data-width="18%">18%</div>
  <div class="spacer"></div>
  <div class="item" data-width="12%">12%</div>
  <div class="spacer"></div>
  <div class="item" data-width="20%">20%</div>
</div>

---

现实

现在，有 一种方法可以在没有attr 的情况下完成此操作，但它在语法上并不那么漂亮。除了行的最后一个元素外，您可以在内联style 声明中使用calc() 从宽度中减去宽度。这个策略也用在前面的例子中。如果要调整列的大小，则必须进行一些非常基本的字符串连接，以确保 calc 语句包含在内联样式中。

.item {
  border: 1px solid gray;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

.flex-row {
  width: 100%;
  display: flex;
  margin-top: 10px;
}

.spacer {
  width: 25px;
}

.spacer:hover {
  cursor: pointer;
  background-color: blue;
}

<div class="flex-row">
  <div class="item" style="width: calc(25% - 25px)">25%</div>
  <div class="spacer"></div>
  <div class="item" style="width: calc(25% - 25px)">25%</div>
  <div class="spacer"></div>
  <div class="item" style="width: calc(10% - 25px)">10%</div>
  <div class="spacer"></div>
  <div class="item" style="width: calc(20% - 25px)">20%</div>
  <div class="spacer"></div>
  <div class="item" style="width: 20%">20%</div>
</div>

<div class="flex-row">
  <div class="item" style="width: calc(50% - 25px)">50%</div>
  <div class="spacer"></div>
  <div class="item" style="width: calc(18% - 25px)">18%</div>
  <div class="spacer"></div>
  <div class="item" style="width: calc(12% - 25px)">12%</div>
  <div class="spacer"></div>
  <div class="item" style="width: 20%">20%</div>
</div>