javascript - 向下导航到行之间的下一个最近的 Flexbox 项目？

Question

我有一个盒子列表，我在一个包装好的 flex 容器中并排显示它们。用户可以通过按下按钮导航它们并转到上一个/下一个框。当前选中的框以不同的颜色显示：

import React, { useState } from "react"
import styled from "styled-components"

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${props => (props.selected ? `red` : `blue`)};
  margin: 10px;
`

const Wrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
`
const Test = () => {
  const boxes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  const [selected, setSelected] = useState(0)

  return (
    <>
      <button
        onClick={() => {
          setSelected(selected + 1)
        }}
      >
        Next item
      </button>
      <button
        onClick={() => {
          // ??
        }}
      >
        Go Down
      </button>
      <Wrapper>
        {boxes.map(box => {
          return <Box selected={selected === box}>{box}</Box>
        })}
      </Wrapper>
    </>
  )
}

export default Test

当我的 flex-container 包装这些框并且有多行时，我还希望允许用户单击一个按钮向下一行，到当前选定框下方的下一个项目。

问题在于，与这里的示例不同，盒子的大小不同，而且 flexbox 容器max-width也不为人所知。所以我不能做一个简单的计算，比如3 boxes per row = the currently selected box number + 3等等。

有什么方法或想法可以优雅地解决这个问题吗？

*PS：我尝试将其转换为 JSFiddle，但不知道如何将其包含styled-components为外部库。任何帮助，将不胜感激。这是我的 JSFiddle Attempt，我还不知道为什么它不起作用，但正在努力！

标签： javascriptreactjsflexbox