代码之家 › 专栏 › 技术社区 › Mark Denom

为什么我的Flexbox在底部留下了一个巨大的缺口?

flexbox css html

Mark Denom · 技术社区 · 7 年前

我希望它收缩时能正常堆叠,这样就一个叠在另一个上面了。

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

.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 {
    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;
}

2 回复 | 直到 7 年前

Daniel Gonzalez 7 年前

Ari Patwary 7 年前

摆脱

background-attachment: fixed;

另外,设置一个确定的宽度将使长方体向右延伸。这将使flex wrap永远不会触发,因为视口即使更小,长方体仍然是1700px。我建议使用

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

它应该正确包装,让你在底部的空间。