我有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>
