flexbox-Ausrichtung funktioniert, aber warum?

[Rolf B]

Hallo grmblfx,

a ist ab Werk ein inline-Element und darum nur so groß wie sein Inhalt. text-align:center hilft darum nichts, und ein width:100% würde - wegen inline - ignoriert.

Erst der display:flex auf dem li erweitert das a Element auf die Größe des li und gibt ihm einen Block-Formatting Context, wodurch das padding im a bleibt.

Das erkennst Du alles im Element-Inspektor der Browser-Entwicklungswerkzeuge, die heben das Elemet hervor und zeigen, wo die Ränder und Paddings sind.

Wie geht es mit weniger Flexbox? Du warst schon fast am Ziel!

• gib dem a ein display:block. Block-Elemente haben automatisch eine Breite von 100%. Damit füllt es das li aus. Nun werden text-align und padding im Inneren des a wirksam.
• nimm display:flex und flex-direction vom li weg, die werden nun nicht mehr gebraucht.

Die Links füllen damit nun jeweils ein Drittel des nav aus.

Die Alternative ist, am a Element kein display:block zu setzen, und dafür text-align:center und padding auf das li Element zu legen. Dann sind die Links nur noch so groß wie die Worte selbst.

Statt display:block kannst Du auch inline-block nehmen. Das text-align muss dann auf das li verschoben werden. Die Links sind dann etwas größer als die Linktexte.

Zwei Flexboxen brauchst Du auf keinen Fall. Guck Dir beim Experimentieren in den Entwicklertools an, welche Boxen wo liegen und wie groß sie sind. Du kannst da auch Regeln modifizieren und einzelne Eigenschaften ein- und ausschalten, das hilft ungemein beim Lernen und Experimentieren.

Rolf