Hallo, nach etlichem Probieren habe ich das Erscheinen der Navigations-links so, wie ich es gerne wollte (siehe Beispieleseite): Die links sind gleichmäßig verteilt und beim hovern wird der Hintergrund (flexbox-Container / Anzahl der Listenelemente) geändert. Ich habe es aber nur durch trial-and-error hinbekommen und würde es auch gerne verstehen. Das relevante CSS dazu lautet: ~~~ CSS nav ul { display: flex; flex-direction: column; justify-content: space-around; } nav li { display: flex; flex: 1; flex-direction: column; list-style: none; } nav a { text-align: center; padding: 0.7rem; } nav a:hover, nav a:focus { background-color: var(--rahmenfarbe); color: var(--mainfarbe); transition: all 200ms ease; font-weight: bold; } ~~~ Warum müssen die li-Elemente ebenfalls als `{display: flex; flex: 1;}` formatiert sein, und warum muss ich a `{text-align: center; }` ergänzen? Oder ist es nur Zufall, dass es funktioniert, und "richtig" wäre anders? Gruß Daniel

Hallo, nach etlichem Probieren habe ich das Erscheinen der Navigations-links so, wie ich es gerne wollte (siehe Beispieleseite): Die links sind gleichmäßig verteilt und beim hovern wird der Hintergrund (flexbox-Container / Anzahl der Listenelemente) geändert. Ich habe es aber nur durch trial-and-error hinbekommen und würde es auch gerne verstehen. Das relevante CSS dazu lautet: ~~~ CSS `nav ul { display: flex; flex-direction: column; justify-content: space-around; } nav li { display: flex; flex: 1; flex-direction: column; list-style: none; } nav a { text-align: center; padding: 0.7rem; } nav a:hover, nav a:focus { background-color: var(--rahmenfarbe); color: var(--mainfarbe); transition: all 200ms ease; font-weight: bold; }` ~~~ Warum müssen die li-Elemente ebenfalls als `{display: flex; flex: 1;}` formatiert sein, und warum muss ich a `{text-align: center; }` ergänzen? Oder ist es nur Zufall, dass es funktioniert, und "richtig" wäre anders? Gruß Daniel