У меня есть контейнер flexbox с несколькими предметами. Они были завернуты в ряд. Есть ли способ, используя JavaScript, получить количество элементов в каждой строке? (другими словами, какова была точка останова для упаковки?)
Например-
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
flex-flow: row wrap;
}
Теперь в первом ряду может быть либо 1, либо 2, либо 3 ... или все 6 items.
Есть ли способ, я мог бы узнать, сколько items есть в первом ряду и последующих рядах?
Одно из возможных решений заключается в следующем: если бы у меня была фиксированная ширина items, то я мог бы просто получить это число на screen_width/width_of_item. Но в настоящее время у меня размер items меняется в зависимости от области просмотра (например, 400px для настольных компьютеров и 600px для мобильных телефонов и т. Д.). Эти медиа-запросы делают это решение немного грязным (но, тем не менее, это решение работает при условии, что все элементы имеют одинаковую ширину).
Но есть ли более чистый способ сделать то же самое?
(Что если каждый элемент имеет собственную ширину?)
Редактировать: Почему я ищу эту информацию?
В настоящее время я работаю над моей стартовой страницей . Я хочу улучшить навигацию с помощью клавиатуры. Вот проблема с этим: Когда я нажимаю стрелку вниз, я хочу отметить плитку под текущей, чтобы быть активной. Получение этой плитки «под» - это проблема под рукой.
В строке 389 из keys.js у меня есть -4, который работает для экранов рабочего стола, но это значение необходимо изменить на -2 для мобильных экранов и аналогичным образом для других различных областей просмотра.