flexbox-Ausrichtung funktioniert, aber warum?

[grmblfx]

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:

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