如何使所有的图像在同一行的规模相应的父div?

Question

我正在尝试在每个flexdiv内具有各种图像计数的多行。

无论父div的宽度是多少，图像应该始终在同一行。这里我设置max-width: 350px，图像应该相应地调整它们的宽度，以便它们适合(在它们的比例中)。如果有5张图片，那么每张图片的宽度应该是20%。如果有10张图片，每张图片的宽度应为10%，以此类推。

我知道我可以在图像上设置宽度，但我想跳过每个div的手动工作，因为会有很多变化。

.flex {
display: flex;
max-width: 350px;
}
img {
margin: 1px;
flex: 1;
}

<div class="flex">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
</div>
<div class="flex">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/100">
</div>

Answer 1

你需要把图片放到div中，否则flex不会调整它们的大小

.flex {
display: flex;
width: 100%;
max-width: 350px;
}
.img-holder {
margin: 1px;
}
img {
display: block;
width: 100%;
}

<div class="flex">
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
</div>
<div class="flex">
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
<div class="img-holder"><img src="https://via.placeholder.com/100"></div>
</div>