如何检测 CSS flex wrap 事件 [英] How to detect CSS flex wrap event

问题描述

我有 flex 容器，里面有项目.如何检测 flex wrap 事件?我想对已包装的元素应用一些新的 css.我想不可能通过纯 css 检测 wrap 事件.但这将是非常强大的功能！当元素换行到新行/行时，我可以尝试通过媒体查询捕获"这个断点事件.但这是一个可怕的方法.我可以尝试通过脚本检测，但也不是很好.

我很惊讶，但是简单的 $("#element").resize() 无法检测 flex 容器的高度或宽度变化以将适当的 css 应用于子元素.哈哈.

我发现只有这个 jquery 代码示例有效jquery 事件监听位置改变

但还是很糟糕.

解决方案

这是一个潜在的解决方案.您可能需要检查其他问题和边缘情况.

基本思想是循环遍历 flex items 并针对前一个兄弟测试它们的 top 位置.如果 top 值更大(因此在页面下方)，则项目已换行.

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

理想情况下，该函数可以与 ResizeObserver(同时使用 window 的 resize 事件 作为回退)作为触发器，在窗口调整大小或页面中的元素因脚本和其他用户交互而更改时检查换行.因为 StackOverflow 代码窗口不会调整大小，所以在这里不起作用.

这是一个用于调整屏幕大小的 CodePen.

var detectWrap = function(className) {varwrappedItems = [];var prevItem = {};var currItem = {};var items = document.getElementsByClassName(className);for (var i = 0; i < items.length; i++) {currItem = items[i].getBoundingClientRect();如果 (prevItem && prevItem.top < currItem.top) {包裹的物品.推(物品[i])；}prevItem = currItem;};返回wrappedItems；}window.onload = 函数(事件){varwrappedItems = detectWrap('item');for (var k = 0; k 

div {显示:弹性；flex-wrap: 包裹;}div >div {弹性增长:1；弹性收缩:1；对齐内容:居中；背景颜色:#222222；填充:20px 0px；颜色:#FFFFFF；字体系列:Arial；最小宽度:300px；}div.wrapped {背景颜色:红色；}

<div class="item">A</div><div class="item">B</div><div class="item">C</div>

I have flex container with items inside. How to detect flex wrap event? I want to apply some new css to elements that have been wrapped. I suppose that it is impossible to detect wrap event by pure css. But it would be very powerful feature! I can try to "catch" this break point event by media query when element wraps into new line/row. But this is a terrible approach. I can try to detect it by script, but it's also not very good.

I am very surprised, but simple $("#element").resize() doesn't work to detect height or width changes of flex container to apply appropriate css to child elements. LOL.

I have found that only this example of jquery code works jquery event listen on position changed

But still terribly.

解决方案

Here's one potential solution. There might be other gotchas and edge cases you need to check for.

The basic idea is to loop through the flex items and test their top position against the previous sibling. If the top value is greater (hence further down the page) then the item has wrapped.

The function detectWrap returns an array of DOM elements that have wrapped, and could be used to style as desired.

The function could ideally be used with a ResizeObserver (while using window's resize event as a fallback) as a trigger to check for wrapping as the window is resized or as elements in the page change due to scripts and other user-interaction. Because the StackOverflow code window doesn't resize it won't work here.

Here's a CodePen that works with a screen resize.

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>

这篇关于如何检测 CSS flex wrap 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！