Responsive Layout mit Flexbox

[Rolf B]

Hallo Gustav,

hast Du die SVG Grafik? Dann setze an Stelle des Wortes Home ein <img> Element, natürlich mit alt="Home".

Für die Breite solltest Du Dich mit den Attributen flex-grow, flex-shrink und flex-basis beschäftigen. Die geben die "Normalgröße" eines Elements an (-basis), sowie den Anteil, den das Element bei Vergrößerungen oder Verkleinerungen übernimmt.

In deinem Fall sollten Home und de ein flex-grow von 0 haben und die normalen Menüpunkte ein flex-grow von 1. Als flex-basis kannst Du auto nehmen.

flex-grow, flex-shrink und flex-basis kann man zum Attribut flex zusammenfassen (dahinter dann die Werte für grow, shrink und basis). Könnte man z.B. so machen:

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

Dein nav ul Element braucht natürlich noch display: flex. Das display:inline-block für die li Elemente ist dann unnötig.

Für schmale Viewports musst Du Dir eine passende Media-Abfrage überlegen, die die Menüpunkte dann wieder untereinander setzt.

Rolf