Layout with Flexbox, flex-grow, flex-shrink, flex-basis property

I got stuck here. Why can these three properties used together? flex-grow, then flex-shrink and then set a width basis? which setting will be applied to the element?
Since the width of the flex container or the parent element is defined and known by developers, either larger or smaller than the total width of the flex items, so i think either flex-grow or the shrink can be applied to, that is, if the width of the container is larger, we use flex-grow, if it is smaller, than we use shrink.
Can anyone help me out with this problem?
Thanks in advance.


.big will grow twice as much as .small, and small will shrink twice as much as big The basis is only a minimum so the combined width will never be less than 250px.

Space around and between will affect position relative to each other and the boundaries. That will also have an impact on how small the window can be shrunk down to.

Assuming there is no space around or between and no margins, let’s say we start out with window width of 250 and stretch it to 400. That would mean big will now be 250px, and small will be 150. Stretch it to 550 and big goes to 350px and small to 200.

(Of the 150px change in overall width, big grows by 100, small by 50.)

Shrink from 550 down to 400, and small loses 100px off the hop; big gives up 50. So now big is 300px and small is already back to basis. It cannot shrink any further.

If .big represents the main content, and .small represents the sidebar and/or navigation menu this favors the content as real estate goes. Who’s looking at the sidebar when adjusting screen width?


Got it!:grinning: Thanks for your and answer and patience.