html - 检测 flexbox 元素之间的鼠标悬停和鼠标按下事件

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>

(注意，我的元素中实际上没有上面的代码，它是由angular在ngFor中生成的，但那是无关紧要的。)

我想在可以检测悬停和鼠标按下事件的 flexboxes 中的这些 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) 的语法，只要知道我想在单击间隔符时调用一个函数即可)

这里的问题是，间隔符破坏了 flexbox 的流动(正如预期的那样)。两个 25% 的元素不再与后面一行的 50% 元素完美对齐。

我发现使用 border-box 可以很容易地在 flex 元素之间放置空格并保持对齐，但我不知道如何另外跟踪鼠标悬停/单击事件不破坏布局的空间。

Answer 1

注意:此处的第一个代码片段是非功能性，因为它依赖于完全零 浏览器支持的实验性功能。这可能会在将来的某个时候起作用，或者该功能可能会在它到达浏览器之前就被废弃。它不应在生产(或开发或 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>