html - 显示 body 的 flex

这是我的代码，我有一些问题导致 main 在标题下，在我看来它不应该 :) 而且我不知道为什么 main 在标题下而不是列中的一个？我不知道如何解决这个问题？我想制作 flexbox SPA。

谁能帮忙看看我做错了什么？因为我试图自己解决，但没能成功。

最佳

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}


.main-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background: #0dfd8d;
    align-items: center;
    justify-content: space-around;
    flex-flow: row wrap;
}

.main-header__logo {
    text-decoration: none;
}

.main-header__logo img {
    height: 7rem;
    vertical-align: middle;
}

.main-header__items {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.main-header__item {
    margin: 1rem;
}

.main-header__item a {
    text-decoration: none;
    color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <div class="main-header__logo">
           <a href="#"><img src="logo.png" alt="logo"></a>
        </div>
        <nav class="main-header__nav">
            <ul class="main-header__items">
                <li class="main-header__item"><a href="#omnie">O Mnie</a></li>
                <li class="main-header__item"><a href="#przyklady">Przykładowe Teksty</a></li>
                <li class="main-header__item"><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="omnie">
            <img src="eagle.jpg" alt="">
            <p>Jestem orłem! W pisaniu artykułów! Dlatego jeżli szukasz specjalistki w dziedzinie pisania artykułów o tematyce
                zakładów bukmacherskich, typów bukmacherskich i kasyn online to nie musisz szukać dalej bo właśnie ją znalazłeś!
            </p>
        </div>
        <div id="przyklady">Przykładowy artykuł</div>
        <div id="Kontakt">
            <form class="form">
                <label for="name">Imie</label>
                <input id="name" type="text" placeholder="Podaj Imie">
                <label for="surname">Nazwisko</label>
                <input id="surname" type="text" placeholder="Podaj Nazwisko">
                <label for="email">Email</label>
                <input id="email" type="email" placeholder="Podaj Email">
                <label for="message">Wiadomość</label>
                <textarea rows="6" id="message" placeholder="Podaj Wiadomość"></textarea>
            </form>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

最佳答案

因为您将 position: fixed; 赋给了您的 .main-header。您需要将 padding-top 作为 main-header 的高度提供给正文。

When you give position: fixed to the element.

Element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding-top: 51px;
}


.main-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background: #0dfd8d;
    align-items: center;
    justify-content: space-around;
    flex-flow: row wrap;
}

.main-header__logo {
    text-decoration: none;
}

.main-header__logo img {
    height: 7rem;
    vertical-align: middle;
}

.main-header__items {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.main-header__item {
    margin: 1rem;
}

.main-header__item a {
    text-decoration: none;
    color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <div class="main-header__logo">
           <a href="#"><img src="logo.png" alt="logo"></a>
        </div>
        <nav class="main-header__nav">
            <ul class="main-header__items">
                <li class="main-header__item"><a href="#omnie">O Mnie</a></li>
                <li class="main-header__item"><a href="#przyklady">Przykładowe Teksty</a></li>
                <li class="main-header__item"><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="omnie">
            <img src="eagle.jpg" alt="">
            <p>Jestem orłem! W pisaniu artykułów! Dlatego jeżli szukasz specjalistki w dziedzinie pisania artykułów o tematyce
                zakładów bukmacherskich, typów bukmacherskich i kasyn online to nie musisz szukać dalej bo właśnie ją znalazłeś!
            </p>
        </div>
        <div id="przyklady">Przykładowy artykuł</div>
        <div id="Kontakt">
            <form class="form">
                <label for="name">Imie</label>
                <input id="name" type="text" placeholder="Podaj Imie">
                <label for="surname">Nazwisko</label>
                <input id="surname" type="text" placeholder="Podaj Nazwisko">
                <label for="email">Email</label>
                <input id="email" type="email" placeholder="Podaj Email">
                <label for="message">Wiadomość</label>
                <textarea rows="6" id="message" placeholder="Podaj Wiadomość"></textarea>
            </form>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

关于html - 显示 body 的 flex ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50388826/

html - 显示 body 的 flex

上一篇：javascript - 在angular js中使用ng-class中的函数

下一篇：css - Internet Explorer 11 中的垂直对齐 + 垂直线性渐变错误