Css 反应：仅显示完全适合flex box的项目，并动态确定显示的项目数

被接受的答案非常接近我想要的。我有一个垂直的flexbox，里面有固定高度的项目。我希望尽可能多的项目显示，但如果一个项目在所有溢出，它应该完全忽略。请尝试链接答案中的代码片段，以了解我的意思。通过在容器上设置“flex-wrap:wrap”和overflow-hidden，可以很容易地实现这种效果

---

然而，我还有一个问题：除了显示这些项目，我还需要知道当前显示了多少项目。我试着展示尽可能多的适合的物品，然后在底部一个标签上写着“……还有5件”如果有5件不适合，例如。最简单的方法是什么？如果可能的话，我希望避免将容器的高度除以单个物品的高度。一定有更好的办法。

进行了大量挖掘，最终找到了一个我满意的解决方案。使用元素的offsetLeft来确定哪些元素被包装。对水平伸缩框进行相同操作，但使用offsetTop

CSS:

反应：

const items = [...]; // Array of ReactElements

const [numberOfItemsDisplayed, setNumberOfItemsDisplayed] = useState(0);
const ref = useRef(null)

useLayoutEffect(() => {
    const cells = ref.current?.children;
    if (cells && cells.length > 0) {
        const startingOffset = cells[0].offsetLeft;
        let numItems = 0;
        for (let i = 0; i < cells.length; i++) {
            if (cells.offsetLeft > startingOffset) {
                break;
            }
            numItems++;
        }
        setNumberOfItemsDisplayed(numItems);
    }
}, []);

return <div class="container" ref={ref}>{items}</div>

const items=[…]；//元素数组
常量[numberOfItemsDisplayed，setNumberOfItemsDisplayed]=使用状态（0）；
const ref=useRef（空）
useLayoutEffect（（）=>{
常量单元格=参考当前？子项；
如果（单元格和单元格长度>0）{
常量startingOffset=单元格[0]。offsetLeft；
设numItems=0；
for（设i=0；istartingOffset）{
打破
}
numItems++；
}
显示的SetNumberOfItems（numItems）；
}
}, []);
返回{items}

进行了大量挖掘，最终找到了一个我满意的解决方案。使用元素的offsetLeft来确定哪些元素被包装。对水平伸缩框进行相同操作，但使用offsetTop

CSS:

反应：

const items = [...]; // Array of ReactElements

const [numberOfItemsDisplayed, setNumberOfItemsDisplayed] = useState(0);
const ref = useRef(null)

useLayoutEffect(() => {
    const cells = ref.current?.children;
    if (cells && cells.length > 0) {
        const startingOffset = cells[0].offsetLeft;
        let numItems = 0;
        for (let i = 0; i < cells.length; i++) {
            if (cells.offsetLeft > startingOffset) {
                break;
            }
            numItems++;
        }
        setNumberOfItemsDisplayed(numItems);
    }
}, []);

return <div class="container" ref={ref}>{items}</div>

const items=[…]；//元素数组
常量[numberOfItemsDisplayed，setNumberOfItemsDisplayed]=使用状态（0）；
const ref=useRef（空）
useLayoutEffect（（）=>{
常量单元格=参考当前？子项；
如果（单元格和单元格长度>0）{
常量startingOffset=单元格[0]。offsetLeft；
设numItems=0；
for（设i=0；istartingOffset）{
打破
}
numItems++；
}
显示的SetNumberOfItems（numItems）；
}
}, []);
返回{items}

我怀疑还有更好的办法。在子组件中没有任何东西可以提供此信息。计算父级中包含多少项并不是坏事，javascript就是这样工作的。我怀疑是否有更好的方法。在子组件中没有任何东西可以提供此信息。计算父级中适合的项的数量并不是坏事，javascript就是这样工作的。