大佬教程收集整理的这篇文章主要介绍了Flexbox：每行4个项目，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
您已经flex-wrap:
wrap在容器上了。很好，因为它会覆盖默认值nowrapsource。这是在某些情况下项目无法包装形成网格的原因。
在这种情况下，主要问题在于flex-grow: 1伸缩项目。
该flex-grow属性实际上并没有设置弹性项目的大小。它的任务是在容器源中分配可用空间。因此，无论屏幕尺寸有多小，每一项都会在行中获得一定比例的可用空间。
更具体地说，您的容器中有八个flex项目。使用flex-grow:1，每个人将获得行中1/8的可用空间。由于您的项目中没有内容，因此它们可以缩小到零宽度并且永远不会包装。
解决方案是在项目上定义宽度。尝试这个：
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
使用简写中的flex-grow: 1定义，flex不需要为flex-basis25％，由于边距，实际上每行将导致三项。
由于flex-grow将消耗行上的可用空间，因此flex-basis只需要足够大即可执行换行。在这种情况下，使用flex-basis:
21%，有足够的空间留出边距，但没有足够的空间容纳第五个项目。
我正在使用一个伸缩框来显示8个项目，这些项目将随我的页面动态调整大小。如何强制将项目分成两行？（每行4个）？
这是一个相关的片段：
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
以上是大佬教程为你收集整理的Flexbox：每行4个项目全部内容，希望文章能够帮你解决Flexbox：每行4个项目所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。