Можно ли задать стили блоку, который находится последним в строке?

Question

[Pavel_Proca]

К примеру, есть блок, и в нём несколько элементов в ряд. Между этими элементами установлен определённый margin справа. При уменьшении экрана, эти элементы по одному переходят на следующую строку. У последнего элемента, ясное дело, margin не должно быть. Как сделать так, что бы после перехода элемента на следующую строку, margin убирался у того элемента, который остался в предыдущей строке последним на месте перешедшего.
Тут можно увидеть более конкретный пример того, что я пытаюсь сделать.

Answer 1

[Ankhena]

Вычислять.
Либо JS.
Либо считать в уме и задавать media и nth-child

Comments

[Pavel_Proca]

А с помощью JS как?

[Ankhena]

Pavel_Proca: Считать сколько влезает, у последних в строке убирать margin. Ну или класс добавлять.

[Ankhena]

Pavel_Proca: Еще есть вариант с флексами и space-between. Правда, придется решать проблему последней строки, но это это легче, чем текущий вариант.

[Ankhena]

Pavel_Proca: Вариант с флексами codepen.io/anon/pen/ZLGKNj
Но из-за того, что ширина в % и есть макс-ширина, то получаются моменты, когда отступов между блоками нет.

Так что оставляю первые 2 варианта

[Pavel_Proca]

Ankhena W: Большое спасибо.

Answer 2

[Андрей Верх]

Обёртке задайте отрицательный правый маржин, чтоб компенсировать отступ.

Answer 3

[aarty20]

Я бы посоветовал пойти от обратного - ставите не правый, а левый марджин для всех элементов, а первому элементу (:first-of-type) убираете его вообще.

Comments

[Ankhena]

Какая разница первый в строке или последний? Все равно считать придется. А последний в строке через nth-child проще пишется, чем первый.

[aarty20]

Разница в том, что марджина справа вообще не будет и его не нужно будет убирать.

[Ankhena]

aarty20: ну да, нужно будет убирать левый