Frage zum Wiki-Artikel „flex“ hier: flex-shrink

[Martin Flex]

Hallo,

ich versuche gerade zu verstehen, wie firefox und chrome den flex-shrink Wert interpretieren. Ich habe folgendes gemacht:

HTML:

<main class="flexcontainer">

<article class="item1">Kiste 1</article>

<article class="item2">Kiste 2</article>

</main>

CSS:

.flexcontainer {display: flex;}

.item1 { flex: 1 1 300px; }

.item2 { flex: 2 2 400px; }

So weit so einfach. Die Summe der Basis-Werte ist 700px, wenn ich den Viewport größer als 700 px ziehe, beispielsweise auf 1000px, so verteilen sich die zusätzlichen 300px im Verhältnis 1:2 auf die beidem Flex-Items. Kiste 1 wird somit 300px + 100px = 400px groß und Kiste 2 wird 400px + 200px = 600px groß. Das Verhalten kann ich in Firefox und Chrome im Inspektor im Layout-Fenster nachvollziehen.

Jetzt die Überraschung (für mich):

Ist der Viewport kleiner als 700px, so hatte ich erwartet, dass die Differenz zu 700px wieder im Verhältnis der shrink-Werte von den Basis-Größen abgezogen würde.

Also: Ist der Viewport 400px groß, ist er 300px kleiner als die Summe der flex-basis Werte (300px + 400px) und diese 300px zu wenig würden im Verhältnis der shrink-Werte 1:2 aufgeteilt. Der Kiste 1 würden 100px abgezogen und der Kiste 2 200px.

Das Verhältnis jedoch beträgt: 3:8 !!

Ein Beispiel mit geraden Werten: Vieport: 480px, Kiste 1 :240px Kiste 2 :240px; Die Differenz ist also 220px. Von Kiste 1 wurden 60px abgezogen, von Kiste 2 160px. Das Verhältnis ist also 60 : 160 oder eben: 3:8.

Kann mir jemand helfen, was ich falsch verstanden habe??

Vielen Dank! Martin

[Rolf B]

Hallo Martin,

habe jetzt keine Untersuchungen angestellt, aber hast Du Dir schon mal die Spec zu Gemüte geführt?

Die Anmerkung scheint einen Hinweis auf das Verhalten bei Größenverhältnissen zu geben, und auch eine Begründung zu liefern weshalb man das so haben wollte.

Rolf

[Rolf B]

Hallo Ingrid,

habe mal kurz gespielt; das ist so wie die Spec sagt, in FF und Chrome identisch.

Wenn man dein shrink-Verhältnis 1:2 mit deinem Breitenverhältnis 3:4 multipliziert, kommt 3:8 heraus. Also: richtig.

Rolf

[Martin Flex]

Hallo Rolf,

vielen Dank für Deine Hilfe - und das dazu in so rasend kurzer Zeit!! Großartig!

Note: The flex shrink factor is multiplied by the flex base size when distributing negative space.

Es gilt eben immer noch: wer lesen kann ist im Vorteil oder ein Blick in's Gesetz hilft bei der Rechtsfindung... Ich fummel mich nebenbei in CSS rein und werde meine Lerntechnik ab sofort umstellen. Bei Problemen zuerst die specs im Original lesen!

1000 Dank,

Martin

[Rolf B]

Hallo Martin,

leider war da auch unser Wiki falsch bzw. veraltet. Zum einen fehlte die Basisbreite als Einflussfaktor (in der Version September 2012 in die Spec gekommen) und der Wert von flex-shrink wurde als Integer benannt. Er ist aber laut Spec eine <number>, nicht <integer> und damit reell. Ich habe das mal gefixt.

Rolf