Как добраться до последнего элемента в строке?

Question

[Максим]

Разумеется это flexbox с переносом
Количество элементов не известно
На данный момент крайние это : 2 4 8 10
Если добавить то и схема изменится
Есть ли возможность добраться до каждого последнего элемента строки ?

https://codepen.io/topicstarter/pen/bOQyKm вот здесь весь геморой
Сам вопрос у меня родился от сюда

Comments

[Rustam Bainazarov]

На автомате с помощью CSS внутри flex'a никак не сделать.

[Максим]

SmthTo, да я понял это ... варианты есть ?

[Rustam Bainazarov]

Максим Ленский, JS?

[Максим]

SmthTo, как это будет выглядеть ?

[Rustam Bainazarov]

Максим Ленский, с учётом разной ширины, то я думаю, что-то типа такого: узнать общую ширину контейнера, потом считать, сколько занимает каждый элемент, затем складывать полученные значения друг с другом, начиная с первого элемента. Если есть переполнение строки по ширине, значит, предыдущий сложенный элемент — последний в строке, а текущий (с которого начинается переполнение) — первый в следующей.

А так я видел варианты, если заранее известны размеры элементов. Да и с помощью CSS тогда можно обойтись.

[Rustam Bainazarov]

Максим Ленский, подсчёты что-то типа: «Какова ширина залупы на Марсе».

[Максим]

SmthTo, тоже не известно ...это для примера сделано

[Rustam Bainazarov]

Максим Ленский, я имею в виду, что скрипт будет считать габариты сначала всего контейнера, а потом каждого из элементов. А габариты уже какие угодно.

Answer 1

[RAX7]

На js можно просто offsetLeft элемента сравнивать с offsetLeft следующего, если больше, то это последний в строке.
Примерно так:
https://codepen.io/anon/pen/aPPbGV

Comments

[Максим]

если менять размер контейнера не работает

[RAX7]

Максим Ленский, по onresize пересчитывать https://codepen.io/anon/pen/MZZYKE

[Максим]

RAX7, вот это жесть ....спс - 100%

Answer 2

[profesor08]

Штатными средствами никак. Ручками набираешь код на js, который будет проверять каким образом влезают элементы методом сложения их ширины и сравнивания с шириной контейнера, не забудь учитывают отступы элементов и контейнера. Все дерзай, можешь даже результатом поделиться.

Comments

[Максим]

жаль что стандартными средствами нельзя сделать ..

[RAX7]

Можно просто offsetLeft элемента сравнивать с offsetLeft следующего, если больше, то это последний в строке.

[Максим]

RAX7, это как делать ? дадите ответ - разумеется все ответы отменю ваш отмечу решением

[RAX7]

Максим Ленский, https://codepen.io/anon/pen/aPPbGV

[Максим]

RAX7, ответом напиши ...отмечу решением

[RAX7]

Максим Ленский, написал)

[Максим]

RAX7, Я отметил решением уже - мне уведомления приходят

[profesor08]

Тоже интересный вариант, главное не попасть в ситуацию, когда offsetLeft равен 0. Аналогично можно проверять и offsetRight, и offsetTop если не равен следующему, значит это последний. Так что целых 5 решений.

[Максим]

profesor08, в этом варианте есть минус - он зависит от ширины