Ausrichtung mit flex

[Rolf B]

Hallo Walter P.,

Wie erreiche ich, dass der Text im nav-Bereich oben im Bereich beginnt...

main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

Woher kommt das align-items:center? Irgendwo abgeschrieben? Empfehlung: mach dich schlau, was die CSS-Eigenschaften bedeuten, die Du zusammenkopierst. Dann weißt Du auch, was Du mit dieser Eigenschaft machen musst.

Aber warum verwendest Du für dein Seitenlayout eine Flexbox? Empfehlung: mach den ganzen Body zu einem Grid

body {
   margin: 0;
   height: 100vh;
   max-width: 60em;
   display: grid;
   grid: "hugo hugo" auto
         "niko maja" 1fr
         "finn finn" auto / auto 1fr;
}
header { grid-area: hugo; }
nav { grid-area: niko; }
main {
   grid-area: maja;
   overflow-y: auto;
}
footer { grid-area: finn; }

Die Namen für die Grid-Bereiche sind Schall und Rauch, ich habe sie bewusst albern gewählt. Man KÖNNTE den Bereich für den Header auch header nennen (aber dann denkt nachher jemand, das müsste so sein)

Das HTML ist dann ganz flach:

<header>
...
</header>
<nav>
...
</nav>
<main>
...
</main>
<footer>
...
</footer>

...und dort bleibt, wenn man den aside-Bereich nach unten "scrollt".

Mit dem Grid kannst Du, wie gezeigt:

• die Navigation aus dem main herausziehen und damit den semantisch unsinnigen aside loswerden. Dein Hauptinhalt ist keine Randnotiz
• die Höhe auf 100vh festnageln. Mit einem overflow-y für main erreichst Du dann, dass nur der main-Bereich scrollt. Das Problem bei 100vh ist, dass der vom Browser festgelegte Margin dafür sorgt, dass 100vh eigentlich zu hoch ist. Deswegen habe ich margin:0 gesetzt. Wenn Du einen Margin haben willst, dann setze ihn bitte explizit und ziehe ihn von der Höhe wieder ab. Beispielsweise:

body {
   margin: 5px auto;
   height: calc(100vh - 10px);
}

Wenn Du die Höhe NICHT festnageln willst, dann kansnt Du auch mit position:sticky auf dem nav dafür sorgen, dass die Navigation im sichtbaren Bereich bleibt.

Ist unter den entsprechenden Stichworten im Selfwiki zu finden.

Rolf