CSS Academy · Lezione

Flex-grow, shrink e basis

Controllate come gli elementi flex si espandono e si restringono e impostate la loro dimensione di base utilizzando la shorthand flex.

Flex-grow, shrink e basis è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

L'abbreviazione flex

L'abbreviazione flex applicata agli elementi flex imposta tre valori: flex-grow, flex-shrink e flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis imposta la dimensione iniziale di un elemento flex prima che si espanda o si restringa. Sostituisce width nella direzione row. auto utilizza la larghezza dell'elemento o la dimensione del contenuto.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow determina quanto un elemento si espande rispetto agli elementi fratelli quando è disponibile spazio libero. Un valore pari a 0 impedisce l'espansione. I valori più alti ricevono proporzionalmente più spazio.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Esempio di flex-grow

Se un contenitore ha 300px di spazio libero e due elementi con flex-grow pari a 1 e 2, il primo riceve 100px aggiuntivi e il secondo 200px aggiuntivi, secondo un rapporto di 1:2.

flex-shrink

flex-shrink controlla quanto un elemento si restringe quando lo spazio non è sufficiente. Il valore predefinito è 1, quindi tutti gli elementi si restringono allo stesso modo. Il valore 0 impedisce il restringimento.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Valori comuni dell'abbreviazione flex

Memorizzi questi schemi comuni:

flex: 1 = espansione e restringimento uniformi, base 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (rigido)
flex: 0 0 200px = 200px fissi, senza espansione o restringimento

flex: 1 — distribuzione uniforme

Impostando flex: 1 su tutti i figli, lo spazio disponibile viene diviso equamente. La base diventa 0%, quindi gli elementi si espandono partendo da nulla e si dividono lo spazio proporzionalmente.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis e width

flex-basis ha la precedenza su width nella direzione dell'asse principale. Se imposta entrambe, prevale flex-basis, a meno che non sia impostato su auto; in tal caso, viene utilizzato il valore di width.

Dimensionamento intrinseco ed estrinseco

Quando flex-basis: 0, come in flex: 1, l'elemento parte da 0 e si espande proporzionalmente, ottenendo una vera distribuzione proporzionale. Con flex-basis: auto, gli elementi partono dalla dimensione naturale del contenuto e poi si espandono.

Schema delle tre colonne

Un layout classico con una barra laterale fissa, un'area principale flessibile e una barra laterale fissa:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width e max-width con flex

Utilizzi min-width e max-width insieme a flex-grow per controllare i limiti di espansione:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Verifica rapida

Un elemento ha flex: 0 0 200px. Che cosa significa?

Riepilogo

flex-grow distribuisce proporzionalmente lo spazio aggiuntivo. flex-shrink controlla quanto gli elementi si comprimono. flex-basis imposta la dimensione iniziale. L'abbreviazione flex: 1 abilita la distribuzione uniforme dello spazio. Utilizzi flex: 0 0 Xpx per elementi di dimensione fissa e flex: 1 per elementi flessibili nello stesso contenitore.

Domande Frequenti

La lezione «Flex-grow, shrink e basis» è gratuita?

Sì — il testo completo di «Flex-grow, shrink e basis» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Flex-grow, shrink e basis»?

Controllate come gli elementi flex si espandono e si restringono e impostate la loro dimensione di base utilizzando la shorthand flex. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Flex-grow, shrink e basis»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy