Këto tre veti në elementet flex kontrollojnë se si ndajnë hapësirën përgjatë boshtit kryesor. Shkurtesa flex i kombinon ato.
.item { : ; }
flex-basis — madhësia ideale/fillestare e elementit përgjatë boshtit kryesor (si width për një rresht). auto përdor madhësinë e përmbajtjes.flex-grow — nëse ka hapësirë shtesë, sa lakmisht ky element zgjerohet. 0 = mos rrit; numrat më të lartë rriten proporcionalisht.flex-shrink — nëse nuk ka hapësirë të mjaftueshme, sa shpejt ky element tkurret. 0 = mos tkurr kurrë (mund të shkaktojë tejkalim); standardi 1 = tkurr sipas nevojës..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
Hapësira shtesë ndahet në raportin e vlerave të rritjes, jo në madhësi absolute.
.item { flex: 1; } /* = 1 1 0 → all items share space EQUALLY (equal widths) */
.item { flex: auto; } /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; } /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
flex: 1 në çdo element bën kolona të barabarta; flex: 0 0 250px bën një panel të ngurtë me gjerësi fikse pranë atij fleksibël.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Këto veti janë se si kontrolloni madhësinë proporcionale në planin flex — kolona të barabarta (flex: 1), panele fikse plus fleksibël (flex: 0 0 X + flex: 1) dhe parandalimi i tkurrjes të padëshiruar (flex-shrink: 0).
Kuptimi i basis/grow/shrink e shndërron Flexbox nga "elementet thjesht qëndrojnë atje" në kontrollë të saktë dhe odzivëse.
Një bibliotekë pyetjesh intervistash IT me përgjigje të detajuara — nga Junior te Senior.
Dhuro