Flex不考慮邊距-有解無憂

我正在嘗試為 flex 添加邊距，但它僅適用于一側。

頁邊距粘在頁面一側：
Flex 不考慮邊距

@import url('https://fonts.googleapis.com/css2?family=Luxurious Roman&display=swap');

* {
    font-family: 'Luxurious Roman', cursive;
}

body {
    margin: 0 0.5em 0 0.5em;
}

#background-video {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-size: cover;
}

.content {
    position: fixed;
    width: 100vw;
}

#detach-button-host {
    display: none;
}

.flex {
    display: flex;
    flex-direction: row;
    width: 100vw;
    align-content: space-between;
    justify-content: space-between;
}

.flexitem {
    width: 50%;
    justify-content: space-between;
    align-items: center;
    margin: 0 5px 0 5px;
    max-height: inherit;
}

.textflex {
    text-align: center;
    color: white;
    font-size: 5vh;
}

.caption {
    color: white;
    text-align: center;
    font-size: 2vh;
    background-color: rgba(40, 57, 101, .9);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19);
}

@media only screen and (max-width: 600px) {
    .flex {
        display: flex;
        flex-direction: column;
        width: 100vw;
        align-items: center;
    }

    .flexitem {
        width: 100vw;
        justify-content: center;
        align-items: center;
        padding: 0 5px 0 5px;
        margin: 0 5px 0 5px;
    }

}

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Underworld</title>
    <link rel=stylesheet href="style.css">
</head>

<body>
    <video autoplay muted loop id="background-video">
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="content">
        <div class="flex">
            <div class="flexitem">
                <p class="textflex">Underworld</p>
                <p class="caption">
                    Un celere stridio, un battito, un fendente, un… caduto.
                    La grande Luna divenuta specchio del putrido miasma terreno, brinda con angoscia alla morte e alla sventura.
                    Quei due leggendari ed eterni guerrieri scrutano ivi la natura delle loro scelte, ansimanti e sospiranti del mai nuovo avvenire.
                    L’immensa Shido, fragile e disastrosa terra delle mancate promesse, osserva ora con affronto tutti coloro che osano macchiare, col sangue, le sue scure e marce praterie.
                    Viandante, una forza invisibile ti intima di allontanarti, ti ordina di fuggire via se le tue iridi mai sono state lambite dall’artiglio dell’orrida verità. Lascia questi lidi se mai i tuoi occhi sono stati scossi dalla veemenza della marcescenza, figlia delle vite meno agiate, cugina dell’ineluttabile tempo.
                    Se invece hai accolto l’oscurità… Benvenuto su Shido.
                </p>
            </div>
        </div>
    </div>
</body>

</html>

uj5u.com熱心網友回復：

問題是你有position: fixed你的.content元素。這是將其從檔案流中洗掉。

要解決此問題，.content請將left: 0

.content {
    position: fixed;
    width: 100%;
    left: 0px;
}

然后在.flex你只需要做的元素上display: flex并洗掉其他寬度和對齊屬性，然后.flex-item你可以根據需要修改左右邊距

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483161.html

標籤：css 弹性盒利润

上一篇：使用顯示網格時的對齊和位置問題

下一篇：這個彈出功能可以應用于許多用戶嗎？