如何检测CSS flex wrap事件
我有flex容器，里面有物品。如何检测flex包装事件？我想将一些新的css应用到已经被包装的元素。我认为用纯css检测包装事件是不可能的。但这将是一个非常强大的功能！当元素换行到新的行/行时，我可以尝试通过媒体查询“捕捉”这个断点事件。但这是一种糟糕的方法。我可以尝试通过脚本来检测它，但它也不是很好。
我非常惊讶，但简单的$("#element").resize()不能检测flex容器的高度或宽度变化，从而无法对子元素应用适当的css。LOL。
我发现只有这个jquery代码的例子可以运行jquery event listen on position changed。
但还是很可怕。
回答 5
Stack Overflow用户
发布于 2016-10-13 13:57:05
这里有一个潜在的解决方案。您可能还需要检查其他的陷阱和边缘情况。
基本思想是循环遍历flex items，并根据前一个兄弟节点测试它们的top位置。如果top值更大(因此页面更靠下)，则项目已换行。
函数detectWrap返回一个已包装的DOM元素数组，可以根据需要设置样式。
理想情况下，该函数可以与ResizeObserver一起使用(同时使用window's resize event作为后备)，作为触发器在调整窗口大小时检查换行，或者作为页面中的元素因脚本和其他用户交互而更改。因为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>
Stack Overflow用户
发布于 2016-10-13 17:28:10
为此目的，在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;
});
}Stack Overflow用户
发布于 2017-10-26 08:07:16
我正在使用一种类似的方法来确定<li>是否包装在将其显示设置为flex的<ul>中。
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';
}
}
}
}https://stackoverflow.com/questions/40012428
复制相似问题