Responsive Layout mit Flexbox

[Gustav]

Hallo Rolf,

vielen Dank für Deine detaillierten Anregungen.

Ich habe zunächst alles so umgesetzt, doch leider nicht den gewünschten Effekt erzielen können.

nav ul {
  text-align: center;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  background-color: transparent;
  color: black;
  text-decoration: none;
  flex: 1 0 auto;
  width: 95%;
  margin: .5em 0;
  padding: .5em 1em;
  border: 1px solid gray;
  border-radius: .5em;
}

nav a:first-of-type(), nav a:last-of-type() {
   flex-grow: 0;
}

Die mittleren Menu-Punkte füllen den verbliebenen Platz nicht auf und wie du schon anmerktest, zerschießt es bei schmaleren Viewports die dann über die gesamte Bildschirmbreite angelegte Darstellung der Naviagtionspunkte untereinander.

Zwischenzeitig habe ich auch noch diverse modifizierte Eingaben ausprobiert, aber auch damit nicht die beabsichtigte Darstellung hinbekommen. Habe ich vielleicht irgend etwas falsch gemacht?

Schöne Grüße, Gustav