极客观点
项目管理
HarmonyOS
我正在使用弹性框来显示 8 个项目，这些项目将随我的页面动态调整大小。我如何强制它将项目分成两行？ （每行 4 个）？
这是一个相关的片段：
（或者，如果您更喜欢 jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ）
.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>
原文由 V Maharajh 发布，翻译遵循 CC BY-SA 4.0 许可协议
你有
flex-wrap: wrap在容器上。这很好，因为它覆盖了默认值，即nowrap（ 来源）。这就是 某些情况下 项目不环绕形成网格的原因。在这种情况下，主要问题是弹性项目上的
flex-grow: 1。flex-grow属性实际上并没有调整弹性项目的大小。它的任务是分配容器中的可用空间 ( source )。因此无论屏幕尺寸多小，每个项目都会按比例获得一部分可用空间就行了。更具体地说，您的容器中有八个弹性项目。使用
flex-grow: 1，每个人都获得该行可用空间的 1/8。由于您的项目中没有内容，它们可以缩小到零宽度并且永远不会换行。解决方案是在项目上定义宽度。尝试这个：
使用
flex-grow: 1在flex速记中定义，不需要flex-basis为 25%，这实际上会导致每行三个边距。由于
flex-grow将占用行上的可用空间，flex-basis只需要足够大以强制换行。在这种情况下，对于flex-basis: 21%，边距有足够的空间，但永远没有足够的空间容纳第五项。