Javascript 我能换一下吗；“证明内容合理”；值取决于flex容器中的元素数？

我正在一个遗留网站上的图像库上工作。除了常规的HTML/jQuery或JS/CSS之外，我不能使用任何东西。我知道使用引导或一些网格库会容易得多

我正在用flexbox构建它。每行有四个图像，有多行。当每行有四个图像时，它看起来很棒。当它有2个或3个时，因为我使用的是

justify content:space-between

，所以它看起来很奇怪，因为图像之间的差距很大

我之所以在之间使用

空格，是因为我希望图像与父容器的左侧对齐，也与右侧对齐

一些注释：


每个flex项目的最大宽度为150px
我希望项目之间有一个边距，但我不在乎边距是否随着视口宽度的变化而变化
flex容器的最大宽度仅允许一行中有四个150px宽的项目

我的问题：如果一行少于一组元素（在本例中为四个），我是否可以将
justify content
更改为更合适的内容，如
flex start

理想情况下，我希望在没有JavaScript/jQuery的情况下实现这一点，但如果这不可能，我也愿意接受这些解决方案

另外，如果我想得太多了，甚至不需要使用
justify content:space-between
，请随时告诉我。
下面是一个工作示例：


/*外部容器*/
.柔性容器{
填充：24px0；
背景：白色；
边框：实心1pxRGBA（0,0,0,1）；
最大宽度：700px；/*或其他*/
/*柔性道具*/
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
/*包含img块和标题*/
.拇指网格{
边框：实心1pxRGBA（0,0,0,1）；
宽度：150px；
边缘底部：36px；
}
.thumb网格：类型{margin left:0；}的第一个
.thumb网格：第n个类型（4）{右边距：0；}
.拇指网格p{
文本对齐：居中；
}
.img块{
背景：黑色；
高度：150像素；
}
.img模块img{
高度：150像素；
不透明度：1；
过渡：不透明度150ms；
}
.img块：悬停img{
不透明度：.9；
}

图1

图2

图3

图4
图5
图6

图7
使用
边距
而不是
对齐内容：间距
来获得间距如何


/*外部容器*/
.柔性容器{
填充：24px0；
背景：白色；
边框：实心1pxRGBA（0,0,0,1）；
最大宽度：700px；/*或其他*/
/*柔性道具*/
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
/*包含img块和标题*/
.拇指网格{
边框：实心1pxRGBA（0,0,0,1）；
宽度：150px；
利润率：0 12px 36px；
}
.thumb网格：类型{margin left:0；}的第一个
.thumb网格：第n个类型（4）{右边距：0；}
.拇指网格p{
文本对齐：居中；
}
.img块{
背景：黑色；
高度：150像素；
}
.img模块img{
高度：150像素；
不透明度：1；
过渡：不透明度150ms；
}
.img块：悬停img{
不透明度：.9；
}

图1

图2

图3

图4
图5
图6

图7
根据您需要支持的内容，使用CSS网格布局可能更有意义（正如TylerH指出的，CSS网格没有通用浏览器支持）。查看文档以了解更多信息：


.flex容器{
显示：网格；
网格模板列：重复（4，1fr）；
栅隙：10px；
网格自动行：最小最大值（100px，自动）；
}

图1

图2

图3

图4
图5
图6

图7
对于此布局，请使用CSS网格。你原来的问题根本就不存在了。您不需要任何变通方法或黑客、JavaScript或任何奇怪的东西来让它工作。使用CSS网格布局，您可以轻松地通过优雅且可维护的代码实现所需的功能

CSS网格布局是一种新的CSS特性，它实际上是第一种合法的布局方式，非常棒。请阅读：





对于您的情况，请特别查看
自动填充
或
自动拟合
属性。下面是另一个有用的链接：

这里有一个简单的例子，说明你想在