Flex 不尊重保证金

Question

我正在尝试为 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>

Answer 1

问题是您的 .content 元素上有 position: fixed。这是将其从文档流中删除。

要解决此问题，请将 .content 设置为 left: 0

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

然后在 .flex 元素上，您只需要执行 display: flex 并删除其他宽度和对齐属性，然后在 .flex-item 上，您可以将左右边距修改为你希望

Flex 不尊重保证金

Flex not respecting margin

css

flexbox

margin