Html 柔性项目包装到下一行，减少容器宽度-CSS

下面是我的代码，其中我希望3个

.item

div位于一行，下一个3个位于另一行。下面提到的代码在正常屏幕上运行良好。但只要我缩小浏览器的大小，就有两个项目显示在一行上。让我知道我在这里做错了什么，虽然我已经增加了33%的宽度，这应该是适应它，但可能是我在这里错过了一些东西

代码-

：根{框大小：边框框；}
.flex{display:flex；width:100%；flex wrap:wrap；}
.item{flex:0 1 33%；边框：1px纯红色；}

弹性项目1
弹性项目2
弹性项目3
弹性项目4
弹性项目5
弹性项目6

Amaury Hanser是对的-添加

框大小：边框框到项目将解决您的问题

另一种方法是使用
grid
而不是
flex
。这允许您使用
1fr
单元，在将宽度平均分配到指定的数字列时，该单元会自动考虑填充和边框大小等因素


.grid{
显示：网格；
网格模板列：重复（3，1fr）；
}
.项目{
边框：1px纯红；
}

弹性项目1
弹性项目2
弹性项目3
弹性项目4
弹性项目5
弹性项目6
Amaury Hanser是对的-添加
框大小：边框框到项目将解决您的问题

另一种方法是使用
grid
而不是
flex
。这允许您使用
1fr
单元，在将宽度平均分配到指定的数字列时，该单元会自动考虑填充和边框大小等因素


.grid{
显示：网格；
网格模板列：重复（3，1fr）；
}
.项目{
边框：1px纯红；
}

弹性项目1
弹性项目2
弹性项目3
弹性项目4
弹性项目5
弹性项目6
通过在您的物品中添加
框大小：边框框
，您将确保其宽度不会超过33%

没有它，它们的宽度等于33%+1px+1px。在某一点上，它将超过其父宽度的三分之一

:root { box-sizing: border-box; }
.flex { display: flex; width: 100%; flex-wrap: wrap; }
.item { flex: 0 1 33%; border: 1px solid red; box-sizing: border-box; }

通过将
box size:border box
添加到项目中，您将确保其宽度不会增长超过33%

没有它，它们的宽度等于33%+1px+1px。在某一点上，它将超过其父宽度的三分之一

:root { box-sizing: border-box; }
.flex { display: flex; width: 100%; flex-wrap: wrap; }
.item { flex: 0 1 33%; border: 1px solid red; box-sizing: border-box; }

你忘了考虑边界的大小。是否尝试添加
框大小：边框框到你的物品中？@AmauryHanser哦，伙计..你让我开心了..哈哈：）这很有帮助…请在回答中加上这个，我会接受你的：）完成。我很高兴这有帮助！：）你忘了考虑边界的大小。是否尝试添加
框大小：边框框到你的物品中？@AmauryHanser哦，伙计..你让我开心了..哈哈：）这很有帮助…请在回答中加上这个，我会接受你的：）完成。我很高兴这有帮助！：）