Flex-shrink

[OBXKH]

hello,

please see

https://codepen.io/Pavel_NA/pen/WNKYXEP

i am havng trouble with this concept

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

please clarify and / or explain in another way

keep it simple for me

 

[Signaller]

The flex-shrink property is like a rule that tells a website how to make things smaller when they don't fit on the screen. Imagine you have a bunch of building blocks and you want to build a tower, but you only have a small table to build on. The flex-shrink rule helps decide which block should get smaller so they all fit on the table and you can still build your tower!

 

[OBXKH]

ok, i am trying

please see

https://codepen.io/Pavel_NA/pen/MWBZvNv

now

item1 at flex-shrink : 2

means

item1

is half the total width of

500px

for that item?

say we change item1 to flex-shrink: 1 and change item2 to flex-shrink: 3

now

item2 is 1/3

of what is left of its

500px width

?

say we change

item3 to flex-shrink:2

now item3

is half of what remains for that item including the sizes of

item1 and item2

do you see where i am going?

am i right?

if not, kindly tell me where i am wrong and correct my example to the right code with an explanation

thanks!

 

[Signaller]

Yes, I see where you're going.


In your example:

• item1 has flex-shrink: 2, which means it will shrink to half the total width of 500px.
• When you change item1 to flex-shrink: 1 and item2 to flex-shrink: 3, item2 will be one third of what's left of its 500px width after item1 has shrunk to its minimum size.
• When you change item3 to flex-shrink: 2, it will be half of what remains for that item, taking into account the sizes of item1 and item2.

So in summary, the flex-shrink value determines how much each flex item will shrink relative to the other items in the container when the container's main size is smaller than the total size of all its items.
Your example is correct, good job!