I think this actually helps me understand it better, idk exactly tho I havent tried it out with different values for each div in a code editor yet. So I’ll probably gain a better understanding when I do. I’m not comfortable with using shorthands just yet
I already get that each element shrinks depending on the numerical value , and how flex-shrink divides it by the unit established in flex-basis. I was just confused as to where or when to put flex-shrink in a stylesheet so that it gives some kind of visual result that I’m doing something with it. I’m assuming by this answer you need to put in shrink first before changing the width for it to do something. I’m sounding kinda insane rn, but that’s the only way I can explain it
1 Like
flex-shrink is a property that controls the behavior of a flex item, that is an element inside a flex container.
So you’ll place that where you define the styles for those items. In your code that’s either on the .flex-item {} or, if you want to have different values of flex-shrink, you can add it inside those #one, #two and #three {}
It doesn’t matter if it’s before or after you set the width of the parent container. CSS doesn’t care about the order in this context since those are different properties.
1 Like
Forgot to mention something: the reason why you didn’t see something happening at a visual level is because, as @varve has correctly pointed out, if all the items have the same numerical value, they’ll all scale at the same rate.
And by default, browsers will apply a flex-shrink value of 1. So in your case, by changing all items at the same time to flex-shrink: 2 nothing will visually change because the end result is the same.
You’ll see a difference if you apply different shrink values to those three items.
1 Like