flex-basis
Defineix la mida inicial d’un element flex abans que flex-grow o flex-shrink entren en acció.
Si es posa una longitud (px, %, rem…), eixa és la mida base de l'element.
Si és auto, la mida prové de width o del contingut.
Si és 0, l'element partix amb mida mínima i després repartix espai amb grow/shrink.
Mides inicials diferents
basis:100px
basis:200px
basis:30%
Cada element comença amb la mida declarada.
Després, si sobra o falta espai, creceran o es contrauran segons grow/shrink.
auto vs 0
basis:auto
basis:0
basis:auto
• auto → pren la mida del contingut o del width.
• 0 → l’element comença “sense mida” i només creix si grow ho permet.
És molt útil combinat amb flex-grow per a repartiment proporcional.
flex-basis + flex-grow
100px + grow:1
100px + grow:3
100px + grow:1
Partixen tots amb 100px, però l’element central té grow:3 i ocupa molt més espai extra.
En resum:
• flex-basis és la mida inicial d’un element flex.
• Reemplaça width quan Flexbox està actiu.
• auto → basat en el contingut o width.
• px / % → mida inicial fixa.
• 0 → l’element parteix amb mida mínima i depén totalment de grow/shrink.
• És clau per entendre com Flexbox reparteix espai.