html - 为什么我的 Flexbox 在底部留下一个巨大的空隙？

Question

因此，当我缩小页面以适应移动设备时，它会在底部留下一个巨大的空隙。

我希望它在收缩时正常堆叠，因此它是一个叠在另一个上面。不会在底部留下巨大的缝隙。

当它的尺寸适合桌面使用时，底部没有缝隙，但一旦我缩小它，它们就会堆叠起来，但它也会在底部留下一个巨大的缝隙。

这就是它在做什么 https://imgur.com/NLUx9ji

.song-box {
    width: 300px;
    margin: 20px;
    position: relative;
    vertical-align: top;

}

.flex-container {
    width: 1700px;
    display: flex;
    flex-wrap: wrap;
}


.flex-container img {
    opacity: 0.5;
}

.flex-container img:hover {
    opacity: 1;
}

<div class="flex-container">
        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>


        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>

        <div class="song-box">
            <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51"
                alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>
</div>

body

body {
    margin: 0;
    padding: 0;
    background: url(/images/party.jpg);
    /* background-size: 100%; */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

Answer 1

您使用的背景图像似乎导致了容器底部的间隙。