flex (abreviatura)

flex és l’abreviatura de flex-grow, flex-shrink i flex-basis.
Permet definir en una sola línia com creix, com es contraurà i quina és la mida inicial d’un element.

flex: 1 1 0 (el cas més habitual)

flex:1
grow:1
shrink:1
basis:0

Tots creixen i es contrauen igualment. Ideal per repartir espai equitativament.

flex: 2 / flex: 1 / flex: 3

flex:1
grow:1

flex:2
grow:2

flex:3
grow:3

Es reparteix l’espai sobrant en proporció 1 : 2 : 3.
L’últim element ocupa el triple d’espai que el primer.

flex: none (no creix ni es contraurà)

flex:none
(0 0 auto)

flex:1

L’element amb flex:none conserva sempre la seua mida.
Els altres dos es reparteixen l’espai restant.

flex: 2 1 100px (definició completa)

grow:2
shrink:1
basis:100px

grow:1
shrink:1
basis:100px

Els tres comencen amb 100px però el primer té grow **2**, així que creix el doble.

En resum:

• flex = grow + shrink + basis.
• flex:1 → grow:1, shrink:1, basis:0 (molt utilitzat).
• flex:none → 0 0 auto (no creix ni es contrau).
• Es pot especificar completament: flex: 2 1 100px.
• És la forma recomanada per controlar el comportament d’un item Flexbox.