Proprietà CSS flex-shrink

La proprietà flex-shrink controlla quanto un elemento flex si riduce rispetto agli altri elementi nello stesso contenitore quando non c'è spazio sufficiente per tutti alle loro dimensioni preferite. Ha effetto solo quando la dimensione combinata degli elementi è maggiore del contenitore — quell'overflow è lo "spazio negativo" che viene redistribuito riducendo gli elementi.

Il valore è un numero senza unità (un fattore flex), non una lunghezza. Un numero più alto significa che un elemento cede più della sua larghezza (o altezza, in una colonna) rispetto ai suoi vicini. Il valore predefinito è 1, quindi per impostazione predefinita ogni elemento flex si riduce alla stessa velocità. Impostalo a 0 per bloccare un elemento alla sua flex-basis e impedirgli di ridursi.

flex-shrink è il terzo valore nella sintassi abbreviata flex (flex: grow shrink basis) ed è una delle proprietà CSS3.

Informazione

Quando lo spazio negativo viene distribuito, il fattore flex-shrink di ogni elemento viene moltiplicato per la sua flex-basis (o, quando flex-basis è auto, per la dimensione del contenuto dell'elemento). Questa ponderazione fa sì che gli elementi più grandi si riducano di più rispetto a quelli piccoli anche quando i loro fattori di riduzione sono uguali — impedisce a un elemento piccolo di collassare a zero mentre uno grande mantiene le sue dimensioni.

Come viene calcolata la riduzione

Supponiamo che un contenitore flex sia largo 400px e contenga due elementi i cui valori flex-basis sommano a 600px — ci sono 200px di overflow da assorbire. Se entrambi gli elementi hanno la stessa flex-basis di 300px e fattori di riduzione di 1 e 3, le quote ponderate sono 300×1 = 300 e 300×3 = 900, per un totale di 1200. Ogni elemento cede l'overflow in proporzione alla sua quota:

L'elemento A rimuove 200 × (300 / 1200) = 50px → risulta 250px.
L'elemento B rimuove 200 × (900 / 1200) = 150px → risulta 150px.

Quindi l'elemento con flex-shrink: 3 perde tre volte più larghezza rispetto a quello con flex-shrink: 1. Le due larghezze finali sommano nuovamente alla larghezza del contenitore di 400px.

Quando usare flex-shrink

Proteggere un elemento fisso. Assegna a una barra laterale, un logo o un'icona flex-shrink: 0 così mantiene le sue dimensioni mentre il contenuto flessibile attorno ad esso si riduce.
Dare priorità a ciò che si riduce per primo. Aumenta il fattore sugli elementi meno importanti in modo che collassino prima del contenuto principale.
Costruire barre degli strumenti e barre di navigazione flessibili. Lascia che i pulsanti si riducano insieme man mano che il viewport si restringe invece di andare in overflow o andare a capo. | Initial Value | 1 | |---|---| | Applies to | Flex items, including in-flow pseudo-elements. | | Inherited | No. | | Animatable | Yes. Items are animatable. | | Version | CSS3 | | DOM Syntax | object.style.flexShrink = "4"; |

Sintassi

Sintassi della proprietà CSS flex-shrink

flex-shrink: number | initial | inherit;

Un numero senza unità imposta il fattore flex; initial lo reimposta a 1 e inherit prende il valore del genitore.

Esempio della proprietà flex-shrink

Nell'esempio seguente, tutti gli elementi partono da una flex-basis di 100px (quindi 500px di contenuto competono per una casella di 320px). Il secondo elemento ha flex-shrink: 7 mentre gli altri hanno 3, quindi si riduce più del doppio della velocità e risulta il più stretto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

![Proprietà CSS flex-shrink](/uploads/media/default/0001/05/b413d578abc6b2c3b0a052506081df9c0183e432.png "CSS flex-shrink property example" =420x)

Impedire a un elemento di ridursi

Imposta flex-shrink: 0 per mantenere un elemento alla sua basis mentre i suoi fratelli assorbono tutto l'overflow. Qui la barra laterale rimane larga 200px e solo l'area del contenuto si riduce:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: flex;
        width: 320px;
        border: 1px dotted #666666;
      }
      .sidebar {
        flex-basis: 200px;
        flex-shrink: 0;        /* never shrinks */
        background-color: #1c87c9;
      }
      .content {
        flex-basis: 200px;
        flex-shrink: 1;        /* shrinks to make room */
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </body>
</html>

Le due basis sommano a 400px in una casella di 320px, quindi 80px devono essere rimossi. Poiché la barra laterale si rifiuta di ridursi, l'area del contenuto assorbe tutti gli 80px e viene renderizzata a 120px.

Valori

Valore	Descrizione	Prova
number	Specifica quanto l'elemento si ridurrà rispetto al resto degli elementi flessibili dello stesso contenitore. Il valore predefinito è 1.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita questa proprietà dall'elemento genitore.

Proprietà correlate

flex-shrink raramente funziona da sola — è la controparte delle altre proprietà di dimensionamento Flexbox:

flex-grow — quanto un elemento cresce per riempire lo spazio extra (la direzione opposta).
flex-basis — la dimensione iniziale dell'elemento prima che la crescita o la riduzione vengano applicate.
flex — la sintassi abbreviata che imposta flex-grow, flex-shrink e flex-basis in una volta sola.
flex-wrap — quando gli elementi possono andare a capo su una nuova riga invece di ridursi.
flex-direction — se la riduzione avviene lungo la riga (larghezza) o la colonna (altezza).

Esercitati

Pratica

Qual è la funzione della proprietà 'flex-shrink' in CSS?

Definisce la capacità di un elemento flex di crescere se necessario.Specifica l'allineamento tra le righe all'interno di un contenitore flessibile quando gli elementi non utilizzano tutto lo spazio disponibile.Definisce la capacità di un elemento flex di ridursi se necessario.Consente di controllare come un contenitore flex è disposto lungo l'asse trasversale.Determina l'ordine in cui gli elementi flex vengono visualizzati e disposti all'interno del contenitore flex.