Comment détecter un événement CSS Flex Wrap

J’ai un conteneur flexible avec des objects à l’intérieur. Comment détecter un événement Flex Wrap? Je veux appliquer de nouveaux css aux éléments qui ont été wrapperd. Je suppose qu’il est impossible de détecter l’événement wrap en pure css. Mais ce serait une fonctionnalité très puissante! Je peux essayer de “capturer” cet événement de point d’arrêt par une requête de média lorsque l’élément est intégré dans une nouvelle ligne / ligne. Mais c’est une approche terrible. Je peux essayer de le détecter par script, mais ce n’est pas très bon non plus.

Regarde l'image

Je suis très surpris, mais simple $ (“# élément”). Resize () ne détecte pas les changements de hauteur ou de largeur du conteneur flex pour appliquer le css approprié aux éléments enfants. LOL.

J’ai constaté que seul cet exemple de code jquery fonctionne. Événement jquery écouter sur la position modifiée

Mais toujours terriblement.

Voici une solution potentielle. Il peut y avoir d’autres pièges et d’autres cas à contrôler.

L’idée de base est de passer en revue les items flexibles et de tester leur position la top élevée par rapport au frère précédent. Si la valeur supérieure est supérieure (donc plus loin dans la page), l’élément est renvoyé à la ligne.

La fonction detectWrap retourne un tableau d’éléments DOM enveloppés, qui peuvent être utilisés pour detectWrap à votre guise.

La fonction peut être utilisée avec window.resize pour détecter le retour à la ligne lorsque la fenêtre est redimensionnée. Parce que la fenêtre de code StackOverflow ne redimensionne pas, elle ne fonctionnera pas ici.

Voici un CodePen qui fonctionne avec un redimensionnement d’é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

Petit bout amélioré sur jQuery pour cela.

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

J’utilise une approche similaire pour déterminer si un

  • a été encapsulé dans un

      dont l’affichage est défini sur flex .

       ul = document.querySelectorAll('.list'); function wrapped(ul) { // loops over all found lists on the page - HTML Collection for (var i=0; i 0 it has been wrapped. loc = li[j].offsetTop; if (loc > 0) { li[j].className = 'wrapped'; } else { li[j].className = 'unwrapped'; } } } }