Html 如何调整组的大小<；部门>；如果它们超过2，是否显示在同一行中？

当我只有两个

时，我希望每一个都有相同的

宽度

，但当我有第三个

保持在同一行时，我希望它们变小

但当我有第四个

时，我将返回到第一个

宽度

（与我只有2个

时相同），并且将有两行，每行2

我需要Javascript来执行它吗？有没有其他的方法仅仅使用HTML/CSS

这是我的html和css的3个部分：

.bigBox{
宽度：100px；
高度：50px；
背景：红色；
}
.A{
宽度：40%；
身高：50%；
浮动：左；
背景：蓝色；
左边距：5px；
}

css无法检测子对象的数量，您可以使用jquery或flexbox使用内部cssEven，我看不到一个干净的方法来实现这一点。可能需要JavaScript。