如何检测CSS flex wrap事件

Question

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

我很惊讶,但简单的$("#element").resize()无法检测flex容器的高度或宽度变化,以便将适当的css应用于子元素.大声笑.

我发现只有这个jquery代码的例子工作 jquery事件监听位置改变了

但仍然非常糟糕.

Answer 1

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

基本思想是循环弯曲items并测试它们top与前一个兄弟的位置.如果top值更大(因此在页面的下方),则项目已包装.

该函数detectWrap返回一个已包装的DOM元素数组,可用于根据需要进行样式设置.

当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>

Answer 2

为此目的,在jQuery上略微改进了一些片段.

wrapped();

$(window).resize(function() {
   wrapped();
});

function wrapped() {
    var offset_top_prev;

    $('.flex-item').each(function() {
       var offset_top = $(this).offset().top;

      if (offset_top > offset_top_prev) {
         $(this).addClass('wrapped');
      } else if (offset_top == offset_top_prev) {
         $(this).removeClass('wrapped');
      }

      offset_top_prev = offset_top;
   });
}

Answer 3

我已经修改了sansSpoon的代码，即使该元素不在页面的绝对顶部也可以正常工作。代码笔： https: //codepen.io/tropix126/pen/poEwpVd

function detectWrap(node) {
    for (const container of node) {
        for (const child of container.children) {
            if (child.offsetTop > container.offsetTop) {
                child.classList.add("wrapped");
            } else {
                child.classList.remove("wrapped");
            }
        }
    }
}

请注意，margin-top不应将其应用于项目，因为它已被考虑在内getBoundingClientRect并将触发包装类以应用于所有项目。