Comment détecter l'événement de retournement de flexibilité CSS

Question

J'ai un conteneur flex avec des éléments à l'intérieur. Comment détecter l'événement de wrap flex ? Je souhaite appliquer un nouveau CSS aux éléments qui ont été enveloppés. Je suppose qu'il est impossible de détecter l'événement de wrap avec du pur CSS. Mais ce serait une fonctionnalité très puissante ! Je peux essayer de "capturer" cet événement de point de rupture par media query lorsque l'élément est enveloppé dans une nouvelle ligne/rangée. Mais c'est une approche terrible. Je peux essayer de le détecter par script, mais ce n'est pas non plus très bon.

Je suis très surpris, mais simplement $("#element").resize() ne fonctionne pas pour détecter les changements de hauteur ou de largeur du conteneur flex afin d'appliquer un CSS approprié aux éléments enfants. LOL.

J'ai trouvé que seul cet exemple de code jquery fonctionne jquery event listen on position changed

Mais c'est toujours terrible.

Answer 1

Voici une solution potentielle. Il peut y avoir d'autres pièges et cas particuliers que vous devez vérifier.

L'idée de base est de boucler à travers les éléments flex items et de tester leur position top par rapport au sibling précédent. Si la valeur top est plus grande (donc plus bas sur la page), alors l'élément a été enveloppé.

La fonction detectWrap renvoie un tableau d'éléments DOM qui ont été enveloppés, et pourrait être utilisée pour les styler comme désiré.

Idéalement, la fonction pourrait être utilisée avec un ResizeObserver (tout en utilisant window's resize event en tant que solution de rechange) comme un déclencheur pour vérifier l'enveloppement pendant le redimensionnement de la fenêtre ou lorsque des éléments dans la page changent en raison de scripts et d'autres interactions utilisateurs. Parce que la fenêtre de code de StackOverflow ne se redimensionne pas, cela ne fonctionnera pas ici.

Voici un CodePen qui fonctionne avec un redimensionnement de l'écran.

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;
}

  A
  B
  C

Answer 2

Un peu d'amélioration sur un extrait de code jQuery dans ce but.

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;
   });
}

Answer 3

J'ai modifié le code de sansSpoon pour qu'il fonctionne même si l'élément n'est pas en haut absolu de la page. Codepen : https://codepen.io/tropix126/pen/poEwpVd

function detectWrap(node) {
    for (const container of node) {
        for (const child of container.children) {
            if (child.offsetTop > container.offsetTop) {
                child.classList.add("wrapped");
            } else {
                child.classList.remove("wrapped");
            }
        }
    }
}

Notez que le margin-top ne doit pas être appliqué aux éléments car il est pris en compte dans getBoundingClientRect et déclenchera l'application de la classe wrapped sur tous les éléments.

Answer 4

Je suis en train d'utiliser une approche similaire pour déterminer si un

• a été enveloppé dans un dont l'affichage est défini sur flex.

  ul = document.querySelectorAll('.list');
  
  function wrapped(ul) {
  
      // boucle sur toutes les listes trouvées sur la page - Collection HTML
      for (var i=0; i 0 cela a été enveloppé.
              loc = li[j].offsetTop;
              if (loc > 0) {
                  li[j].className = 'enveloppé';
              } else {
                  li[j].className = 'non-enveloppé';
              }
          }
      }
  }

Answer 5

J'ai remarqué que les éléments s'enveloppent généralement par rapport au premier élément. Comparer le décalage vers le haut de chaque élément par rapport au premier élément est une approche plus simple. Cela fonctionne pour wrap et wrap-reverse. (Ne fonctionnera probablement pas si les éléments utilisent l'ordre flex)

var wrappers = $('.flex[class*="flex-wrap"]'); //sélectionner les éléments flex wrap et wrap-reverse

    if (wrappers.length) { //ne pas ajouter d'écouteur s'il n'y a pas d'éléments flex
        $(window)
            .on('resize', function() {
                wrappers.each(function() {
                    var prnt = $(this),
                        chldrn = prnt.children(':not(:first-child)'), //sélectionner les éléments flex
                        frst = prnt.children().first();

                    chldrn.each(function(i, e) { $(e).toggleClass('flex-wrapped', $(e).offset().top != frst.offset().top); }); //l'élément s'est enveloppé
                    prnt.toggleClass('flex-wrapping', !!prnt.find('.flex-wrapped').length); //l'enveloppement a commencé
                    frst.toggleClass('flex-wrapped', !!!chldrn.filter(':not(.flex-wrapped)').length); //tous sont enveloppés
               });
            })
            .trigger('resize'); //manière fainéante d'appeler initialement ce qui précède
    }

.flex {
    display: flex;
}

.flex.flex-wrap {
    flex-wrap: wrap;
}

.flex.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex.flex-1 > * { /*rendre les éléments de largeur égale*/
    flex: 1;
}

.flex > * {
  flex-grow: 1;
}

.cc-min-width-200 > * { /*enfant combinateur*/
  min-width: 200px;
}

    Hello
    There
    World