如何检测 CSS flex wrap 事件

Question

我有 flex 容器，里面有物品。如何检测 flex wrap 事件？我想将一些新的 css 应用于已包装的元素。我想不可能通过纯 css 检测 wrap 事件。但这将是非常强大的功能！当元素换行到新行/行时，我可以尝试通过媒体查询“捕获”这个断点事件。但这是一种糟糕的方法。我可以尝试通过脚本来检测它，但它也不是很好。

我很惊讶，但是简单的 $(“#element”).resize() 无法检测 flex 容器的高度或宽度变化以将适当的 css 应用于子元素。哈哈。

我发现只有这个 jquery 代码示例才有效 jquery 事件侦听位置已更改

但还是很可怕。

原文由 mr.boris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个潜在的解决方案。您可能需要检查其他陷阱和边缘情况。

基本思想是循环遍历 flex items 并测试他们的 top 相对于前一个兄弟的位置。如果 top 值更大（因此在页面下方），则该项目已包装。

函数 detectWrap 返回已包装的 DOM 元素数组，可用于根据需要设置样式。

理想情况下，该函数可以与 ResizeObserver （同时使用 window 的 resize 事件 作为回退）一起使用，因为要检查的窗口是由于脚本和其他用户交互而调整大小或页面中的元素发生变化。因为 StackOverflow 代码窗口不会调整大小，所以它在这里不起作用。

这是一个可以调整屏幕大小的 CodePen 。

 var detectWrap = function(className) {

  var wrappedItems = [];
  var prevItem = {};
  var currItem = {};
  var items = document.getElementsByClassName(className);

  for (var i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();
    if (prevItem && prevItem.top < currItem.top) {
      wrappedItems.push(items[i]);
    }
    prevItem = currItem;
  };

  return wrappedItems;

}

window.onload = function(event){
  var wrappedItems = detectWrap('item');
  for (var k = 0; k < wrappedItems.length; k++) {
    wrappedItems[k].className = "wrapped";
  }
};

 div  {
  display: flex;
  flex-wrap: wrap;
}

div > div {
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  background-color: #222222;
  padding: 20px 0px;
  color: #FFFFFF;
  font-family: Arial;
  min-width: 300px;
}

div.wrapped {
  background-color: red;
}

 <div>
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

原文由 Brett DeWoody 发布，翻译遵循 CC BY-SA 4.0 许可协议