我有flex容器里面有物品.如何检测flex wrap事件？我想对包装的元素应用一些新的CSS.我想这是不可能通过纯CSS检测wrap事件.但这将是非常强大的功能！当元素包裹到新行/行中时,我可以尝试通过媒体查询“捕获”这个断点事件.但这是一个可怕的做法.我可以尝试通过脚本检测它,但它也不是很好.
我非常惊讶,但简单的$(“#element”).resize()不能检测flex容器的高度或宽度更改,以将适当的CSS应用于子元素.大声笑.
我发现只有这个jquery代码的例子才行
jquery event listen on position changed
但还是非常可怕
解决方法
这是一个潜在的解决方案.可能还有其他问题需要检查.
基本思想是循环弹性项目,并测试他们的顶部位置与以前的兄弟姐妹.如果顶部值较大(因此进一步下降页面),则该项目已包装.
函数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 > div.wrapped {
background-color: red;
}
<div> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div>
