Html 每行最多3个div，每个flexbox的宽度相同，即使只有1或2个div

我坚持用flexbox创建一个每行最多包含3个div的div。如果一行只包含一个或两个div，脚本会拉伸它们以适应剩余的宽度，但我希望它们都是相互内联的

不太重要的问题是picture div比items div宽一点

body{
保证金：0；
}
.包装纸{
宽度：500px；
显示器：flex；
高度：200px；
保证金：0自动；
调整项目：灵活启动；
}
.主要内容{
弹性：2；
显示器：flex；
柔性包装：包装；
}
.首先{
边框样式：实心；
背景颜色：蓝色；
宽度：100%；
}
.项目{
弹性：1；
边际：0像素；
最小宽度：计算（100%*（1/4）-1px）；
右边距：10px；
边框样式：实心；
高度：30px；
}
.项目{
弹性：1；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
}
.项目*{
框大小：边框框；
}
.内容4{
高度：200px；
宽度：20px；
背景色：红色；
弹性：1；
左边距：10px；
}

图画
项目
项目
项目
项目
项目
项目
项目
项目
内容4

因为您一行有3个，而不是

flex:1

，所以使用

flex-basis:calc（33.333%-10px），其中
10px
表示右边距

堆栈片段


body{
保证金：0；
}
.包装纸{
宽度：500px；
显示器：flex；
高度：200px；
保证金：0自动；
调整项目：灵活启动；
}
.主要内容{
弹性：2；
显示器：flex；
柔性包装：包装；
}
.首先{
边框样式：实心；
背景颜色：蓝色；
宽度：100%；
}
.项目{
弹性基础：计算（33.333%-10px）；
边际：0像素；
最小宽度：计算（100%*（1/4）-1px）；
右边距：10px；
边框样式：实心；
高度：30px；
}
.项目{
弹性：1；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
}
.项目*{
框大小：边框框；
}
.内容4{
高度：200px；
宽度：20px；
背景色：红色；
弹性：1；
左边距：10px；
}

图画
项目
项目
项目
项目
项目
项目
项目
项目
内容4