Manuale di riferimento CSS

Regole CSS (RULES)

Completo di attributi CSS

Proprietà flex-wrap CSS3 Proprietà flex-grow CSS3

Metodo di utilizzo e esempio dell'attributo flex-shrink di CSS3

L'attributo CSS flex-shrink specifica il modo di restringere un oggetto flex rispetto agli altri oggetti all'interno del contenitore flex.

La tabella sottostante fornisce una descrizione dell'uso e la cronologia delle versioni di questo attributo, nonché la sintassi dell'uso di questo attributo nel script JavaScript.

Valore predefinito:	1
Applicabile a:	Elementi elastici
Ereditarietà:	Nessuno
Animabile:	Sì.Si prega di consultare Proprietà animazione.
Versione:	Nuova funzionalità di CSS3
Sintassi JavaScript:	oggetto.style.flexShrink="5"

Sintassi dell'uso di flex-shrink

La sintassi di questo attributo è la seguente:

flex-shrink: numero | iniziale | eredito

L'esempio seguente dimostra come utilizzare la proprietà flex-shrink.

Esempio

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-shrink:　1;　/*　Safari　6.1+　*/
　　　　flex-shrink:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-shrink:　3;　/*　Safari　6.1+　*/
　　　　flex-shrink:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-shrink:　5;　/*　Safari　6.1+　*/
　　　　flex-shrink:　5;
}

Prova a vedere‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
number	Un numero positivo utilizzato per determinare il coefficiente dell'elemento flessibile flex-shrink. Il valore predefinito è 1. I numeri negativi non sono validi.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore di flex-shrink dell'elemento padre.

Compatibilità del browser

Compatibilità dei browser per la proprietà flex-shrink, i numeri nella tabella rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

	Firefox 18+ ^-moz-, 28+ Google Chrome 21+ ^-webkit-, 29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Leggi di più

Ecco il tutorial da consultare:Layout a colonne del CSS3.

Proprietà correlate:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-wrap,justify-content,min-height,min-width,order.

Proprietà flex-wrap CSS3 Proprietà flex-grow CSS3