Frage zum Wiki-Artikel „Flex-Items“

[Ulk]

Der Beispiel-Code liefert in allen möglichen Ansichten ("Vorschau", "ausprobieren") und Browsern (Firefox, Chromium) das folgende Aussehen:

In der ersten Zeile ist die zweite Box ("Paragraph") doppelt so breit wie alle anderen ("richtig" ).

In der zweiten Zeile ist die zweite Box ("Section") NICHT doppelt so breit wie alle anderen, sondern gleich breit. ("falsch").

Warum?

[Rolf B]

Hallo Ulk,

nein, das ist nicht falsch, sondern funktioniert nach Design.

Der "Beachten Sie" Paragraph hat das begründet, wenn auch zu knapp.

Ich habe das verbessert, schau es Dir bitte an.

Für Wikiphobiker:

Die zweite Reile besteht aus drei Sections mit Fließtext. Die haben zwar alle ein flex-grow:1 bekommen, und die mittlere ein flex-grow:2, aber Flexbox kann nur den Platz verteilen, der auch vorhanden ist. Und die Fließtexte in den Sections genügen, damit die Sections den ganzen horizontalen Platz einnehmen.

Durch Hinzufügen von bspw. flex-basis:15em zu den Sections wird dieser Standardplatzbedarf begrenzt und nun kann flex-grow zur Wirkung kommen.

Ich habe das Beispiel bewusst NICHT modifiziert, sondern lediglich die Erklärung geschrieben, um den Vorführeffekt zu behalten. Das Ergänzen einer flex-basis im Frickl steht jedem Leser frei.

Rolf

[Tabellenkalk]

Hallo,

In der zweiten Zeile ist die zweite Box ("Section") NICHT doppelt so breit wie alle anderen, sondern gleich breit. ("falsch").

möglicherweise muss ich mein Augenmaß neu kalibrieren, aber ich denke nicht, dass die Boxen gleich breit sind...

Gruß
Kalk

[MudGuard]

Hi,

möglicherweise muss ich mein Augenmaß neu kalibrieren, aber ich denke nicht, dass die Boxen gleich breit sind...

nachgemessen - bei mir sind's 260, 232, 242 Pixel (+/- ein paar Pixel Ablesegenauigkeit 😉)

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

ja, tatsächlich, die Box mit dem längeren Text ist größer.

Das ändert sich, wenn man eine flex-basis vergibt. Dann habe ich - in einem 849px breiten Frickl - Boxbreiten von 220.75px und 343.5px.

Das ist kein 2:1 Verhältnis, aber das ist auch nicht der Effekt von flex-grow. Statt dessen werden die Boxbreiten zunächst ohne flex-grow bestimmt. Bei Angabe einer flex-basis wird der Inhalt dabei nicht beachtet (der kann wegen langer Wörter die Box dehnen). Basierend auf diesen Boxbreiten und Margins wird der Platzbedarf bestimmt, geguckt, wieviel im Container übrig ist, und dies im flex-grow-Verhältnis auf die Boxen verteilt.

Rolf