如何设置父 div 以使 CSS 的子级每行最多 3 个

Question

我已将每个项目设置在父 div 内，并为其指定 33% 的宽度属性，认为因此每行只能有 3 个项目.item {  float: left;  width: 33%;}这是父级.categories {  display: flex;  flex-wrap: wrap;  align-items: center;  justify-content: center;  flex-flow: row-wrap;}我的期望是每行只有 3 个项目，因为每个类别都是 33%，但行为是每行有尽可能多的项目，忽略了该规则，所以我理解错误，如果有人可以指出资源来研究这个问题或帮助解释它，谢谢！我这里有一个沙箱：https ://codesandbox.io/s/funny-ellis-cvvpu

Answer 1

问题是您已在 Home.js 文件中设置所有类，例如：

<div className=".item">

而不是做：

<div className="item">

只需删除.所有内容className，您的代码就可以正常工作。