Responsive Layout mit Flexbox

[Rolf B]

Hallo Gustav,

sorry, ich war unaufmerksam.

Das ul Element ist die Flexbox und die li Elemente sind demnach die Flex-Items. Die Flex-Eigenschaft auf den a Elementen findet keine Beachtung.

D.h. man muss das so stylen:

nav ul {
  display: flex;
  ... etc
}

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

nav a {
   width: 100%;
   ... etc
}

Du musst gucken, welche Styles Du den <li> und welche den <a> gibst, damit es so aussieht wie Du es haben möchtest.

Wenn Du Flexbox besser verstehen willst, ist dieses Spielchen hier eine gute Übung 😉.

Rolf