我有一个flex容器,里面有项目。如何检测flex wrap事件?我想应用一些新的css到已经被 Package 的元素上。我想用纯css是不可能检测到wrap事件的。但这将是一个非常强大的功能!我可以尝试在元素 Package 到新的行/行时通过媒体查询“捕获”这个断点事件。但这是一个糟糕的方法。我可以尝试通过脚本检测它,但它也不是很好。
我非常惊讶,但是简单的$(“#element”).resize()不能检测flex容器的高度或宽度变化,从而将适当的css应用到子元素。
我发现只有这个例子的jquery代码工作jquery event listen on position changed
但还是很可怕。
7条答案
按热度按时间nfzehxib1#
这里有一个可能的解决方案。可能还有其他的陷阱和边缘情况需要检查。
基本思想是循环遍历flex
items
,并根据前一个兄弟测试它们的top
位置。如果top
值更大(因此在页面的更下方),则该项目已经 Package 。函数
detectWrap
返回一个已经 Package 的DOM元素数组,可以根据需要进行样式设置。理想情况下,该函数可以与
ResizeObserver
一起使用(同时使用window
'sresize
event作为后备)作为触发器,以检查窗口调整大小或页面中的元素因脚本和其他用户交互而更改时的换行。由于StackOverflow代码窗口不会调整大小,因此它在这里不起作用。这里有一个CodePen,它可以调整屏幕大小。
vd2z7a6w2#
为了这个目的,在jQuery上稍微改进了一点代码片段。
v1uwarro3#
我已经修改了sansSpoon的代码,即使元素不在页面的绝对顶部也可以工作。Codepen:https://codepen.io/tropix126/pen/poEwpVd
请注意,
margin-top
不应该应用于项目,因为它被分解到getBoundingClientRect
中,并将触发 Package 类应用于所有项目。drnojrws4#
我使用了类似的方法来确定
<li>
是否被 Package 在<ul>
中,该<ul>
的显示设置为flex
。z5btuh9x5#
我注意到元素通常会相对于第一个元素进行换行。比较每个元素的顶部偏移量与第一个元素的偏移量是一种更简单的方法。这适用于wrap和wrap-reverse。(如果元素使用灵活顺序,可能不起作用)
vdzxcuhz6#
如果有人想找到行的最后一个元素,可以使用下面的逻辑。它也适用于多行
pkwftd7m7#
避免在这类任务中使用媒体查询,它太不稳定了。想想当另一个flex项目被添加,或者文本长度改变时所涉及的工作,你必须重新调整这些媒体查询。
请考虑使用Resize Observer API。
Flex框中的链接列表:
CSS:
Package 后,脚本将类
flex_box-wrapped
添加到Flex容器中,并将flex_item-wrapped
添加到 Package 后的每个Flex项中。这是通过测试每个项目相对于第一个项目的顶部位置来实现的。
当浏览器宽度(或高度,或字体大小)更改时,Resize Observer API会相应地重新计算并修改每个类名。
这里有一个演示CodePen:Flex-wrap detection script,它还显示了如何在Flex框 Package 或展开时立即在水平和垂直之间切换。
该演示也适用于
direction: rtl;
和/或flex-wrap: row-reverse;
。