Flexbox ist schon eine nette Sache. Elemente sind damit flugs ausgerichtet, ohne lästige Hacks und Berchnungen. Zudem kann man den Flex-Items mitgeben, ob sie den gesamten Platz ihrer Achse einnehmen sollen oder wie sie sich genau ausrichten sollen. Alles nur mit jeweils einer einzigen Eigenschaft.

Also probierte ich eben mit einer horizontalen Navigation herum. Die Items sollten sich bei :hover bzw. :focus auf die gesamte, zur Verfügung stehende Höhe der Navigation ausdehnen. Dabei fielen mir dann zwei Sachen auf:

  1. Der Navigationscontainer sollte eine echte Höhe besitzen, kein Padding. Denn dieses steht dann für die gewünschte Ausdehnung eines Flex-Items nicht zur Verfügung.
  2. Die Ausdehnung selber ist nicht animierbar. Es wird einfach der Wert von align-self geändert und dieser lässt sich nicht animieren.

Ich habe in meinem Beispiel dem Navigationscontainer extra einen Rahmen gegeben, damit man den zugewiesenen Innenabstand sieht. Zudem habe ich der Navigation eine Höhe gegeben. Ansonsten würden wir nichts sehen. Eine Mindesthöhe (min-height) wäre auch eine Option.

See the Pen Flexbox – Navigation with hover-effect by Jens Grochtdreis (@jensgro) on CodePen.