.profile { display: flex; } .avatar { flex-shrink: 0; }Avatarul își păstrează lățimea, iar textul folosește restul spațiului.
LECȚIA 58 DIN 100
Protejează un element de micșorare
Păstrează dimensiunea avatarului când textul are nevoie de spațiu.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
flex-shrink stabilește cât poate fi redusă dimensiunea principală a unui element când linia nu are suficient spațiu. Valoarea 0 exclude avatarul din distribuirea spațiului negativ.
.profile { display: flex; } .avatar { flex-shrink: 1; }Valoarea 1 permite avatarului să se micșoreze împreună cu celelalte elemente.
PASUL 2 · APLICĂ
Exercițiul tău
Activează Flexbox pe profil și oprește micșorarea avatarului.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Profilul este container flex.
- ○Avatarul nu participă la micșorare.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Containerul flex calculează spațiul disponibil, iar flex-shrink: 0 păstrează dimensiunea principală a avatarului.