问 如何检测CSS flex wrap事件

EN

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

基本思想是循环遍历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>

​

为此目的，在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;
}

我正在使用一种类似的方法来确定 <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';