flexbox-Ausrichtung funktioniert, aber warum?

[grmblfx]

Hallo,

nach etlichem Probieren habe ich das Erscheinen der Navigations-links so, wie ich es gerne wollte (siehe Beispieleseite): Die links sind gleichmäßig verteilt und beim hovern wird der Hintergrund (flexbox-Container / Anzahl der Listenelemente) geändert.

Ich habe es aber nur durch trial-and-error hinbekommen und würde es auch gerne verstehen. Das relevante CSS dazu lautet:

nav ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

nav li {
  display: flex;
  flex: 1;
  flex-direction: column;
  list-style: none;
}

nav a {
  text-align: center;
  padding: 0.7rem;
}

nav a:hover,
nav a:focus {
  background-color: var(--rahmenfarbe);
  color: var(--mainfarbe);
  transition: all 200ms ease;
  font-weight: bold;
} 

Warum müssen die li-Elemente ebenfalls als {display: flex; flex: 1;} formatiert sein, und warum muss ich a {text-align: center; } ergänzen?

Oder ist es nur Zufall, dass es funktioniert, und "richtig" wäre anders?

Gruß Daniel

[Matthias Apsel]

Hallo grmblfx,

Flexbox wirkt explizit nur auf die Kindelemente (und nicht auf Kindeskinder).

Bis demnächst
Matthias

[grmblfx]

Hallo grmblfx,

Flexbox wirkt explizit nur auf die Kindelemente (und nicht auf Kindeskinder).

Danke für die schnelle Antwort, aber ich verstehe es immer noch nicht ganz.

Ich vermute mal, durch

nav li { display: flex; flex: 1; }

bekommen die Listenelemente die Ausdehnung, dass der ganze verfügbare Raum des flexbox-Containers aufgeteilt wird (was man beim hovern sieht).

Aber warum brauche ich das text-align:center? Weil <a> ein inline-Element ist? Ich hatte es zunächst mit

li {
  display: flex;
justify-content: space-around;
}

a {
display: block;
}

versucht, aber da werden die links nicht zentriert.

Gruß Daniel

[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

[grmblfx]

Herzlichen Dank, jetzt habe ich es (denke ich) verstanden!

Den Inspektor kenne und nutze ich häufig, aber auf die Box-Größen hatte ich bisher noch nicht so geachtet.

Gruß Daniel