flex-grow + flex-shrink + flex-basis
SHORTHAND - flex (flex-grow + flex-shrink + flex-basis)
Usando valores diferentes de 1.
A
B
C
flex-grow: 0;
flex-shrink: 1;
flex-shrink: 1;
flex-grow: 2;
flex-shrink: 0;
flex-shrink: 0;
flex-grow: 1;
flex-shrink: 2;
flex-shrink: 2;
Se dois itens tiver com os valores iguais e um tiver 3, não irá alterar muito.
Mas se item tiver o valor 1 e o outro 5, esse terá 5x o tamanho em relação ao que tem o valor 1.
A
B
C
flex-grow: 0;
flex-shrink: 1;
flex-shrink: 1;
flex-grow: 5;
flex-shrink: 0;
flex-shrink: 0;
f-g: 1;
f-s: 4;
f-s: 4;