Html 如何使用CSS均匀地水平分布图像使图像增长/收缩

我想在一条水平线上有很多图像。问题是图像的数量是可变的，我更喜欢一个通用的解决方案，而不是一个用STYLE=“”设置宽度百分比的解决方案。认为这不会太难，并尝试使用flexbox：

<div id="thumbs">
    <img src="http://dummyimage.com/300x200/444/fff" alt=""/>
    <img src="http://dummyimage.com/300x200/444/fff" alt=""/>
    <img src="http://dummyimage.com/300x200/444/fff" alt=""/>
</div>

#thumbs {   
    width: 100%;
    max-width:100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

img {
    align-self: stretch;
    flex-grow: 1;
    flex-shrink: 1;
}

#拇指{
宽度：100%；
最大宽度：100%；
显示器：flex；
柔性包装：nowrap；
对齐项目：拉伸；
}
img{
自我调整：伸展；
柔性生长：1；
弹性收缩：1；
}

当将#thumbs容器的大小调整为大于900px的宽度时，这很好，因为图像被拉伸到新的宽度，这正是我希望发生的。但是，将绘制者的大小调整到小于900px的宽度时，图像应该均匀地收缩到可用空间，而这不会发生：它们保持在300px的宽度。如何使图像缩小？

我们只需将每个

---

您需要将最大宽度设置为

33.3333%

#拇指{
宽度：100%；
最大宽度：100%；
显示器：flex；
柔性包装：nowrap；
对齐项目：拉伸；
}
img{
柔性生长：1；
弹性收缩：1；
最大宽度：33.3333%；
}

---

图像的最小宽度：0