flex-grow + flex-shrink + flex-basis
SHORTHAND - flex (flex-grow + flex-shrink + flex-basis)
Usando valores diferentes de 1.
A
B
C
flex: 0 1 190px
flex: 2 0 190px
flex: 1 2 190px
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
A
B
C
- A - flex: 1 0 200px
- B - flex: 1 1 150px
- C - flex: 1 8 auto;
| Flex Valor Simplificado | Flex Valor Completo |
|---|---|
| flex: intial; | flex: 0 1 auto; |
| flex: none; | flex: 0 0 auto; |
| flex: auto; | flex: 1 1 auto; |
| flex: 3; | flex: 3 1 auto; |