如何设置父 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&nbsp;className=".item">而不是做：<div&nbsp;className="item">只需删除.所有内容className，您的代码就可以正常工作。