CSS flex-shrink

[Hendoul]

Hi

Ich versuche flex-shrink zu verstehen und schaue mir diese Website dazu an:
https://www.mediaevent.de/css/flex.html

Bei einem Flex-Container von 880px breite nimmt jedes flex-item darin 293.33px ein bei flex-shrink: 1

Wenn man jetzt mit dem unteren Slider auf flex-shrink 1 2 1 umstellt, dann sind die äusseren items 309px und das mittlere 261px.
Ok, die äusseren wurden um 16px vergrössert und das innere um 32px verkleinert. Dies entspricht dem Verhältnis von 1 2, also dem was nun im flex-shrink steht.

Aber warum gerade 309 und 261? Warum 16 und 32? Es könnte ja auch 294 und 291 sein? Also die äusseren 1px grösser und das mittlere 2px kleiner. Würde ja auch dem Verhältnis 2:1 entsprechen?

 

[Tourgott]

Entweder ich verstehe deinen Beitrag nicht, oder du verstehst Flexbox noch nicht so ganz
Dass sich das Verkleinern/Vergrößern immer auf das Verhältnis (1/2/1 usw.) beziehst, hast du ja schon herausgefunden. Die Pixel spielen dabei keine Rolle bzw. beziehen die sich immer auf die Breite des jeweiligen Browserfensters. Wenn du im Entwicklermodus einfach mal dein Browserfenster selbst größer bzw. kleiner machst und die Elemente untersuchst, wirst du es selbst feststellen.

Deswegen würde ich übrigens nicht mehr mit px arbeiten.

 

[Hendoul]

Die 880px werden ja unter den 3 items aufgeteilt. Wenn alle shrink 1 haben, dann gleichmässig. Aber warum bekommt bei shrink 1 2 1 das mittlere 261 von den 880px?

Das mittlere schrumpft 32px und die äusseren vergrössern sich um je 16px. Und ich frage mich woher es genau diese Zahlen nimmt. Könnte ja auch 40-20 sein, 80-40, 100-50 oder was auch immer, solange Verhältnis 2:1

 

[NullPointer]

Eine gründliche Erklärung dazu gibt es hier: https://developer.mozilla.org/en-US...olling_Ratios_of_Flex_Items_Along_the_Main_Ax

 

[Hendoul]

Ok, konnte mit rumspielen schon einige Aha-Effekte auslösen

Bei folgendem Beispiel, woher nimmt er den Wert für die 100%?

flex: 1 1 calc(100% + 2 * irgendeinWert);

läuft calc() nachdem alles berechnet wurde und dann wird das nochmals angepasst? Sind die 100% die ursprünglich berechnete width des flex-item?