如何检测CSS flex wrap事件
我有灵活的容器里面有物品。 如何检测flex wrap事件？ 我想将一些新的css应用于已经包装的元素。 我想通过纯css检测包装事件是不可能的。 但它将是非常强大的function！ 当元素换行到新行/行时，我可以尝试通过媒体查询“捕获”此断点事件。 但这是一种可怕的方法。 我可以尝试通过脚本检测它，但它也不是很好。
我很惊讶，但简单的$（“＃element”）。resize（）不能检测flex容器的高度或宽度变化，以便将适当的css应用于子元素。 大声笑。
我发现只有这个jquery代码的例子才能使jquery事件监听位置发生变化
但仍然非常糟糕。
这是一个潜在的解决方案。 您可能需要检查其他陷阱和边缘情况。
基本思路是遍历flex items并测试它们与前一个兄弟姐妹的top位置。 如果top值更大（因此在页面的下方），那么该项目已经包装。
函数detectWrap返回已包装的DOM元素数组，可用于根据需要设置样式。
该函数可与window.resize一起使用，以在调整窗口大小时检测包装。 因为StackOverflow代码窗口没有resize，所以在这里不起作用。
这是一个与屏幕resize一起使用的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; }
A B C
为此目的，在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; }); }
我正在使用类似的方法来确定
是否已经包含在
，并且它的显示设置为flex 。
ul = document.querySelectorAll('.list'); function wrapped(ul) { // loops over all found lists on the page - HTML Collection for (var i=0; i 0 it has been wrapped. loc = li[j].offsetTop; if (loc > 0) { li[j].className = 'wrapped'; } else { li[j].className = 'unwrapped'; } } } }