调整窗口大小时图像未移动到下一行

Question

我有一个包含一些图像的div。当图像不适合屏幕大小时，我希望我的图像移动到下一行。但是，图像只是被剪掉了，它们不会打断到下一行！

html

<div class="cd">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
</div>

css

.cd {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
margin-bottom: 5em;
}
.cd img {
flex: 1;
max-width: 100%;
height: auto;
max-height: 310px;
}

我做错了什么？

Answer 1

您已将flex-wrap属性设置为nowrap。只需更改为wrap，如果不适合当前行，flex就会注意将所有内容移到下一行。

.cd {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 5em;
}
.cd img {
flex: 1;
max-width: 100%;
height: auto;
max-height: 310px;
}

<div class="cd">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
<img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
</div>

Answer 2

将nowrap更改为flex wrap属性中的wrap。一切都会好起来的。