In questo tutorial affronteremo il modificatore di proprietà flex-shrink del modello Flexbox, che ti consente di creare layout flessibili adattabili a diverse dimensioni dello schermo. Mentre nell'ultimo video abbiamo trattato flex-grow, che regola come gli elementi nel container Flex possono crescere, stavolta ci concentreremo sulla riduzione degli elementi quando lo spazio nel container è inferiore alla base flessibile specificata. In questo articolo imparerai come limitare o adattare con precisione la riduzione degli elementi Flexbox utilizzando flex-shrink.
Scoperte principali
- flex-shrink determina quanto può contrarsi un elemento quando lo spazio disponibile non è sufficiente.
- Il valore predefinito di flex-shrink è 1, il che significa che un elemento può occupare spazio a seconda di quanto spazio è disponibile e di come sono definiti gli altri elementi nel container.
- Si può utilizzare flex-shrink per stabilire un rapporto specifico di contrazione tra diversi elementi.
Guida passo passo
Nel seguito ti spiegherò i passaggi per utilizzare ottimamente flex-shrink. Ogni passaggio sarà illustrato con variabili di screenshot che potrai sostituire successivamente con gli screenshot appropriati dal video.
Prima vedrai un'applicazione di base di Flexbox in CSS. Hai tre elementi con una base flessibile di 100 pixel. Se lo spazio nel Flex-Container è sufficiente, tutto rimarrà come previsto.
Adesso riduciamo l'altezza del container a 200 pixel. In questo caso, lo spazio necessario è maggiore dell'altezza del container. Gli elementi hanno ancora una base flessibile di 100 pixel e pertanto non possono contrarsi perché abbiamo impostato flex-shrink su 0.
Per attivare il meccanismo di contrazione, modifica il valore di flex-shrink. Impostalo a 1 per l'elemento nav. In questo modo informi il CSS che l'elemento nav dovrebbe contrarsi al massimo.
Salva le tue modifiche e vedrai che l'elemento nav si restringe proporzionalmente, fino all'altezza minima dettata dal contenuto.
Se desideri che tutti gli elementi si contraiano uniformemente, imposta flex-shrink su 1 per tutti gli elementi. Se il container diventa più piccolo dello spazio necessario, tutti gli elementi si contraggono di conseguenza.
Per illustrare in sintesi come i diversi valori di flex-shrink influenzano il layout, scegli un rapporto come 1:1:2. In questo caso, l'area principale (main) riceve la maggior parte della contrazione, mentre gli altri elementi ricevono quote minori ciascuno.
Questo significa che l'elemento principale (main) occuperà più spazio in caso di mancanza di spazio o avrà bisogno di meno spazio rispetto agli altri due elementi. Tuttavia, se desideri un adattamento del layout uniforme, puoi impostare flex-shrink allo stesso valore per tutti gli elementi.
Infine, puoi combinare i valori di flex-grow, flex-shrink e flex-basis per ottenere maggiore flessibilità nel design del layout in CSS. Assicurati di adattarli sempre alle esigenze del tuo design.
Riepilogo
In questo tutorial hai imparato come utilizzare flex-shrink in CSS per controllare la variazione delle dimensioni degli elementi Flexbox. Hai appreso diverse modalità per definire la contrazione e come essa influisce sul layout.
Domande frequenti
Come funziona flex-shrink?flex-shrink determina quanto può contrarsi un elemento quando lo spazio disponibile è inferiore alla base flessibile.
Qual è il valore predefinito di flex-shrink?Il valore predefinito di flex-shrink è 1, il che significa che tutti gli elementi si contraggono uniformemente.
Come imposto flex-shrink per più elementi?Specificando lo stesso valore di flex-shrink per tutti gli elementi, la contrazione sarà distribuita uniformemente.
Posso utilizzare flex-shrink in combinazione con flex-grow?Sì, flex-shrink, flex-grow e flex-basis possono essere utilizzati insieme per ottenere un layout flessibile.
Cosa succede se imposto flex-shrink su 0?Se flex-shrink è impostato su 0, gli elementi rispettivi non si contraggono, anche se il container è più piccolo della somma delle flessibili.
