Html 当项目占用不同的宽度时，将flexbox中的最后一个项目移动到新行

.main{
显示器：flex；
边框：1px纯黑；
}
.item、.item2、.item3、.item4{
填充：10px；
}
.项目{
柔性生长：1；
柔性包装：包装；
}
.项目2{
弹性增长：7；
背景颜色：粉红色；
}
.项目3{
柔性生长：2；
背景颜色：黄色；
}

1.
2.
3.
4.

使用

.item group

s按行组织

.item

s。例如：

*{
框大小：边框框；
保证金：0；
填充：0；
}
梅因先生{
显示器：flex；
边框：1px纯黑；
柔性包装：包装；
}
.项目组{
弹性基准：100%；
显示器：flex；
}
.item1、.item2、.item3、.item4{
填充：10px；
}
.项目1{
柔性生长：1；
}
.项目2{
弹性增长：7；
背景颜色：粉红色；
}
.项目3{
柔性生长：2；
背景颜色：黄色；
}
.项目4{
背景色：紫罗兰色；
}

1.
2.
3.
4.

您需要激活父元素（flex容器）上的包裹，然后使元素全宽：

.main{
显示器：flex；
边框：1px纯黑；
柔性包装：包装；
}
.item、.item2、.item3、.item4{
填充：10px；
}
.项目{
柔性生长：1；
}
.项目2{
弹性增长：7；
背景颜色：粉红色；
}
.项目3{
柔性生长：2；
背景颜色：黄色；
}
.项目4{
弹性基准：100%；
}

1.
2.
3.
4.

如果我不能将

弹性基础

平均分配到前三个项目的100%，该怎么办？同样，使用

弹性包装

，如果您减小屏幕尺寸，项目3将下降到第二行。我不希望发生这种情况。@ZeroDarkThirty我已经更新了我的答案，请再看一看。在我的情况下，如果屏幕尺寸减小，flex wrap会导致第一行项目移动到下一行。我知道你的例子不是这样的。知道是什么原因吗？@ZeroDarkThirty也许你可以提供你的完整代码给我？肯定会涉及到更多的CSS