2

Есть многострочный flex контейнер.

Как можно задать селектор для каждого последнего элемента в строчке, в данном примере это будут элементы 2, 4, 7.

Количество и размер элементов заранее не известен.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.container div {
  background-color: grey;
  margin: 3px;
  padding: 3px;
  font-weight: bold;
  color: white;
}

.c1 {
  width: 100px;
}

.c2 {
  width: 130px;
}

.c3 {
  width: 300px;
}

.c4 {
  width: 100px;
}

.c5 {
  width: 100px;
}

.c6 {
  width: 100px;
}

.c7 {
  width: 100px;
}
<div class="container">
  <div class="c1">1</div>
  <div class="c2">2</div>
  <div class="c3">3</div>
  <div class="c4">4</div>
  <div class="c5">5</div>
  <div class="c6">6</div>
  <div class="c7">7</div>
</div>

1
  • наверно такого не бывает ....тут без js наверно не обойтись 13 янв 2019 в 2:04

1 ответ 1

0

У вас блоки идут тупо в ряд друг за другом. Кто из них будет последним в строчке, зависит от их размеров и размеров контейнера. Это динамическое свойство. Соответственно, вы его стилями не зададите. Если навесите стили на блоки 2,4 и 7, то при изменении размеров контейнера/окна они могут перестать быть последними "в строчках" (ибо по сути никаких "строк" тут нет).

Пишите скрипт, который будет сравнивать позиции блоков, и, например, получая для каждого из них clientLeft, будет сравнивать оное с тем же свойством предыдущего блока и, если оно МЕНЬШЕ, значит, предыдущий блок был правее, а это возможно если он последний "в строке" визуально. И применяйте к нему скриптом же нужные стили.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.