Javascript 如何检测CSS flex wrap事件

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

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

我发现只有这个jquery代码的例子有效

---

但仍然很糟糕。

这里有一个潜在的解决方案。您可能还需要检查其他gotchas和edge情况

基本思想是循环flex

项

，并对照前一个同级测试它们的

顶部

位置。如果

top

值更大（因此在页面下方更远），则项目已包装

函数

detectWrap

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

该函数可与

窗口一起使用。调整大小

可在调整窗口大小时检测是否换行。因为StackOverflow代码窗口没有调整大小，所以它在这里不起作用

这是一个可以调整屏幕大小的方法

var detectWrap=函数（类名）{
var wrappedItems=[]；
var previitem={}；
var currItem={}；
var items=document.getElementsByClassName（className）；
对于（变量i=0；i
div{
显示器：flex；
柔性包装：包装；
}
div>div{
柔性生长：1；
弹性收缩：1；
证明内容：中心；
背景色：#22222；
填充：20px 0px；
颜色：#FFFFFF；
字体系列：Arial；
最小宽度：300px；
}
包扎{
背景色：红色；
}

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<ul.length; i++) {

        //Children gets all the list items as another HTML Collection
        li = ul[i].children;

        for (var j=0; j<li.length; j++) {
            // offsetTop will get the vertical distance of the li from the ul.
            // if > 0 it has been wrapped.
            loc = li[j].offsetTop;
            if (loc > 0) {
                li[j].className = 'wrapped';
            } else {
                li[j].className = 'unwrapped';
            }
        }
    }
}

ul=document.querySelectorAll（'.list'）；
功能包装（ul）{
//在页面上找到的所有列表上循环-HTML集合
对于（变量i=0；i 0）{
李[j].类名='wrapped'；
}否则{
李[j].类名='unwrapped'；
}
}
}
}
我注意到元素通常会相对于第一个元素进行换行。将每个图元的偏移顶部与第一个图元进行比较是一种更简单的方法。这适用于包裹和反向包裹。（如果元素使用flex-order，则可能不起作用）


var wrappers=$（'.flex[class*=“flex wrap”]'）//选择“柔性包裹”和“反向包裹”图元
if（wrappers.length）{//如果没有flex元素，则不添加侦听器
$（窗口）
.on（'resize'，function（））{
wrappers.each（函数（）{
var prnt=$（此），
chldrn=prnt.children（“：not（：first child）”，//选择弹性项
frst=prnt.children（）.first（）；
chldrn.each（函数（i，e）{$（e）.toggleClass（'flex-wrapped'，$（e）.offset（）.top！=frst.offset（）.top）；}）；//元素已包装
prnt.toggleClass（'flex-wrapping'，！！prnt.find（'flex-wrapped'）.length）；//包装已开始
frst.toggleClass（'flex-wrapped'，！！！chldrn.filter（'：not（.flex-wrapped））.length）；//所有都已包装
});
})
.trigger（'resize'）；//最初调用上述
}
.flex{
显示器：flex；
}
.flex.flex-wrap{
柔性包装：包装；
}
.flex.flex-wrap-reverse{
柔性包装：反向包装；
}
.flex.flex-1>*{/*使项目宽度相等*/
弹性：1；
}
.flex>*{
柔性生长：1；
}
.cc-min-width-200>*{/*子组合符*/
最小宽度：200px；
}

你好
那里
世界
如果有人想找到行的最后一个元素，可以使用下面的逻辑。它也适用于多条线路

       window.onresize = function (event) {
            const elements = document.querySelectorAll('.borrower-detail');
            let previousElement = {};
            let rowTop = elements[0].getBoundingClientRect().top;
            elements.forEach(el => el.classList.remove('last-el-of-row'))
            elements.forEach(el => {
                const elementTop = el.getBoundingClientRect().top;

                if (rowTop < elementTop) {
                    previousElement.classList.add('last-el-of-row');
                    rowTop = elementTop;
                }

                previousElement = el;
            })
        };

window.onresize=函数（事件）{
const elements=document.querySelectorAll（“.follower detail”）；
让previousElement={}；
让rowTop=elements[0]。getBoundingClientRect（）.top；
elements.forEach（el=>el.classList.remove（'last-el-of-row'））
elements.forEach（el=>{
const elementTop=el.getBoundingClientRect（）.top；
if（行顶<元素顶）{
previousElement.classList.add（'last-el-of-row'）；
rowTop=elementTop；
}
前一元素=el；
})
};
我已经修改了Sansspong的代码，使其即使元素不在页面的绝对顶部也能正常工作。代码笔：

功能检测RAP（节点）{
node.forEach（容器=>{
Array.from（container.children）.forEach（child=>{
const containerPos=container.getBoundingClientRect（）.top；
const childPos=child.getBoundingClientRect（）.top；
if（childPos>containerPos）{
child.classList.add（'wrapped'）；
}否则{
child.classList.remove（'wrapped'）；
}
});
});
}

请注意，
margintop
不应应用于项目，因为它被分解为
getBoundingClientRect
的一部分，并将触发包装类应用于所有项目