Flexbox: Controlarea micșorării în direcția flexibilă cu flex-shrink

În acest tutorial ne ocupăm de modificatorul de proprietăți flex-shrink al CSS. Această opțiune face parte din modelul Flexbox, care îți permite să creezi layout-uri flexibile care se adaptează la diferite dimensiuni de ecran. În timp ce în ultimul videoclip am discutat despre flex-grow, care reglează cum elementele din containerul Flex pot crește, acum discutăm despre micșorarea elementelor atunci când spațiul din container este mai mic decât flex-basis-ul prestabilit. În această postare vei învăța cum poți restricționa sau ajusta micșorarea elementelor Flexbox cu ajutorul flex-shrink.

Concluzii cheie

• flex-shrink determină cât de mult poate să scadă un element atunci când spațiul disponibil este insuficient.
• Valoarea implicită pentru flex-shrink este 1, ceea ce înseamnă că un element poate ocupa spațiu în funcție de cât de mult spațiu este disponibil și de celelalte elemente definite în container.
• Se poate folosi flex-shrink pentru a stabili o anumită proporție pentru scăderea între mai multe elemente.

Ghid pas cu pas

În continuare îți voi explica pașii pentru a folosi optim flex-shrink. Voi asocia fiecare pas cu variabile de captură de ecran pe care ulterior le poți înlocui cu capturile de ecran corespunzătoare din videoclip.

Mai întâi vei vedea o aplicație de bază a Flexbox-ului în CSS. Ai trei elemente care au o flex-basis de 100 de pixeli. Dacă există suficient spațiu în containerul Flex, totul rămâne conform planului.

Apoi reducem înălțimea containerului la 200 de pixeli. În acest caz, spațiul necesar este mai mare decât înălțimea containerului. Elementele au încă o flex-basis de 100 de pixeli și, prin urmare, nu pot să scadă, deoarece am setat flex-shrink pe 0.

Pentru a activa mecanismul de micșorare, schimbi valoarea flex-shrink. Setează-l la 1 pentru elementul nav. Astfel, informezi CSS-ul că elementul nav ar trebui să se micșoreze maxim.

Acum salvează-ți modificările, și vei observa că elementul nav se va micșora proporțional, până la o înălțime minimă dată de conținut.

Dacă dorești ca toate elementele să se micșoreze uniform, setează flex-shrink la 1 pentru toate elementele. Dacă containerul devine acum mai mic decât spațiul necesar, toate elementele se vor micșora corespunzător.

Pentru a arăta acum împreună cum diferitele valori flex-shrink influențează layout-ul, alege o proporție precum 1:1:2. În acest caz, elementul principal (main) primește cea mai mare parte de micșorare, în timp ce celelalte elemente primesc părți mai mici.

Aceasta înseamnă că elementul main va ocupa mai mult spațiu sau va avea nevoie de mai puțin spațiu atunci când este restricționat, față de celelalte două elemente. Dacă dorești totuși un layout mai uniform, poți seta flex-shrink pentru toate elementele la aceeași valoare.

În final, poți combina valorile pentru flex-grow, flex-shrink și flex-basis, oferindu-ți mai multă flexibilitate în proiectarea layout-urilor în CSS. Asigură-te că le ajustezi întotdeauna în funcție de cerințele design-ului tău.

Rezumat

În acest tutorial ai învățat cum să folosești flex-shrink în CSS pentru a controla modificarea dimensiunilor elementelor Flexbox. Ai învățat diferite moduri de a defini micșorarea și cum aceasta afectează layout-ul.