Responsive Layout mit Flexbox
bearbeitet von GustavHallo 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.
[![](/images/506a3568-895a-11ea-aa5b-b42e9947ef30.png?size=medium)](/images/506a3568-895a-11ea-aa5b-b42e9947ef30.png)
Zwischnzeitiog 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