Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap.
For instance-
<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;
}
Within the first row, there could be anywhere from 1 to all 6 items.
Is there a method to determine the number of items in the initial row and subsequent rows?
A potential solution would involve calculating the width of the fixed-width items, but given that the item sizes are responsive based on the viewport (e.g. 400px for desktop and 600px for mobile), this becomes complex due to media queries.
What's a more efficient approach to achieving this?
(Considering items might have varying widths as well!)
Edit: What's prompting this inquiry?
Currently refining my startpage, I aim to enhance keyboard navigation. Issue arises when moving downwards using arrow keys, where marking the tile below as active is the challenge.
At line 389 of keys.js, the value is currently set at -4, suitable for desktops –– however requiring adjustment to -2 for mobile screens alongside other viewports.