我可以更改“justify-content"吗?值取决于 flex 容器中的元素数量? [英] Can I change the "justify-content" value depending on the number of elements in the flex container?

问题描述

我正在旧网站上制作图片库.除了常规的旧 HTML/jQuery 或 JS/CSS 之外，我不能使用任何其他东西.我知道使用 Bootstrap 或某些网格库会容易得多.

我正在用 flexbox 构建它.每行有四个图像，有多个行.当每一行都有四个图像时，它看起来很棒.当它有 2 个或 3 个时，因为我使用了 justify-content: space-between，它看起来很奇怪，因为图像之间的差距很大.

我使用 space-between 的原因是我希望图像与父容器的左侧和右侧对齐.

一些注意事项:

• 每个 flex 项的最大宽度为 150 像素
• 我想要项目之间的边距，但我不在乎这个边距是否随着视口宽度的变化而变化
• flex 容器的最大宽度仅允许连续四个 150 像素宽的项目

我的问题:如果一行少于一组元素(在本例中为四个)，我可以将 justify-content 更改为更合适的内容，例如 flex-开始?

理想情况下，我想在没有 JavaScript/jQuery 的情况下执行此操作，但如果不可能，我也愿意接受这些解决方案.

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

/* 外容器 */.flex 容器 {填充:24px 0;背景:白色；边框:实心 1px rgba(0,0,0,.1);最大宽度:700px；/* 管他呢 *//* 弹性道具 */显示:弹性；flex-wrap: 包裹;对齐内容:间隔；}/* 包含 img 块和标题 */.thumb-grid {边框:实心 1px rgba(0,0,0,.1);宽度:150px；底边距:36px；}.thumb-grid:first-of-type { margin-left: 0;}.thumb-grid:nth-of-type(4) { margin-right: 0;}.thumb-grid p {文本对齐:居中；}.img-block {背景:黑色；高度:150px；}.img-block img {高度:150px；不透明度:1；过渡:不透明度150ms；}.img 块:悬停 img {不透明度:.9；}

<div class="thumb-grid"><div class="img-block"><a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="示例图像"></a>
<p>图像1</p>

<div class="thumb-grid"><div class="img-block"><a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="示例图像"></a>

<p>图像2</p>

<div class="thumb-grid"><div class="img-block"><a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="示例图像"></a>

<p>图像3</p>

<div class="thumb-grid"><div class="img-block"><a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="示例图像"></a>

<p>图像4</p>