display:flex - der Standardwert und andere Begrifflichkeiten

[marctrix]

Hej Matthias,

Ich bin an einem Kurs für den Einstieg in Flexbox dran. Hier habe ich einige Fragen:

CSS/Tutorials/Flexbox/Grundlagen

Normalerweise / Im normalen Elementfluss (ist hier display:block; der Standardwert, der durch display:flex überschrieben wird?) nehmen Elemente wie p und section die volle Breite des Elternelements ein.

Durch display: flex wird das Elternelement zum flexiblen Container. Die Breite aller Kindelemente wird nun vom Browser berechnet.

Frage:

• Welche Regel sorgt dafür, dass die oberen p-Elemente so klein sind, dass rechts noch Platz ist?

Bei mir ist da kein Platz (Safari, MacOS Mojave). Das ist so auch richtig, denn der gesamte verfügbare Platz wird ja gleichmäßig auf die vorhandenen Elemente aufgeteilt.

• *Warum verteilen sich die „größeren“ section-Elemente dann über die gesamte Breite?

Aus demselben Grund, warum sich die ps über die gesamte Breite verteilen. 😉

• Wie würdet ihr die verschiedenen Breiten erklären?

Schmeiß mal den Text aus den p-Elementen 😉

Was man gerne vergisst: es wird nur der verfügbare Platz entsprechend der flex-grow-Angabe verteilt. Du hast aber so viel Text in deinen Boxen, dass es keinen Platz mehr zum verteilen gibt.

Wenn du Kontrolle darüber haben willst, in welchem Verhältnis die Boxen aufgeteilte werden (in deinem Beispiel willst du für die Kinder des zweiten Containers wohl 1:2:1), dann musst du den Elementen eine Basis-Größe mitgeben. Ein Grund, warum ich immer gleich mit der Kurzschreibweise flex arbeite. Meist will ich so was nämlich kontrollieren.

Was du also machen müsstest ist, du schreibst statt flex-grow: 1 und flex-grow: 2 flex: 1 2 1em; und flex: 2 1 2em;

Das macht dann folgendes:

flex: 1 2 1em;

Diese Box hat eine Basisgröße, die nur halb so groß ist, wie die andere Box, die doppelt so breit ist. Sie wächst auch nur halb so schnell, schrumpft aber doppelt so schnell, wie die andere, wodurch das Verhältnis 1:2 gewahrt bleibt.

Entsprechend gilt umgekehrt:

flex: 2 1 2em;

Diese Box hat eine Basisgröße, die doppelt so groß ist, wie die andere Box, die daher halb so breit ist. Diese Box hier wächst auch doppelt so schnell, schrumpft aber nur halb so schnell, wie die andere, wodurch das Verhältnis 2:1 gewahrt bleibt.

😉

Marc