Not a problem
I'm sure you've looked through it but you can find most of the flexbox specs at MDN.
As you see by the css comment,
flex: is the shorthand for flex-grow, flex-shrink, and flex-basis.
Initial value as each of the properties of the shorthand:
Yes, it is relative to the other items and the grow/shrink rates that are set on them, and the space available in the container.
flex-grow:0; means don't grow past flex-basis
flex-grow:1; means grow at 1x the rate of other items that grow
flex-grow:2; means grow at 2x (twice) the rate of other items that grow
And in like manner with flex-shrink
flex-shrink:0; means don't shrink past flex-basis
flex-shrink:1; means shrink at 1x the rate of other items that shrink
flex-shrink:2; means shrink at 2x (twice) the rate of other items that shrink
You can also use decimal values
flex-grow: 0.5; means grow at 1/2 the rate of other items that grow
The flex-grow and flex-shrink links give a good illustration of the flex factors in the examples found on those pages
As I understand it, that's how it works. The amount of other items, their size and flex factors, and the space available in the container all play a role in how adjustments get made.
Here's another tutorial I have been going through
Actually, you'll probably find that link more helpful as it has better illustrations and interactive examples.