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

Si quelqu'un veut trouver le dernier élément de la ligne à partir de laquelle les éléments wrapped ont commencé, il peut utiliser la logique ci-dessous. C'est applicable pour plusieurs lignes également

       window.onresize = function (event) {
            const elements = document.querySelectorAll('.borrower-detail');
            let previousElement = {};
            let rowTop = elements[0].getBoundingClientRect().top;
            elements.forEach(el => el.classList.remove('last-el-of-row'))
            elements.forEach(el => {
                const elementTop = el.getBoundingClientRect().top;

                if (rowTop < elementTop) {
                    previousElement.classList.add('last-el-of-row');
                    rowTop = elementTop;
                }

                previousElement = el;
            })
        };