La proprietà CSS flex-shrink
setta il fattore di restringimento di un elemento flessibile. Se la dimensione di tutti gli elementi flessibili è maggiore del loro contenitore flessibile: gli elementi si restringono per adattarsi secondo il valore impostato di flex-shrink
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Sintassi
/* <number> valori */
flex-shrink: 2;
flex-shrink: 0.6;
/* Valori globali */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
La proprietà flex-shrink
è specificata come un singolo <number>
.
Valori
Sintassi formale
Esempio
HTML
<p>La larghezza del contenuto è di 500 px; la base flessibile degli articoli flessibili è 120 px.</p>
<p>A, B, C hanno il valore flex-shrink:1 invece D ed E hanno flex-shrink:2 </p>
<p>La larghezza di D ed E è minore delle altre.</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
CSS
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
Result
Specifiche
Specifiche | Stato | Commento |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-shrink' in that specification. |
Candidate Recommendation | Definizione iniziale |
Initial value | 1 |
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | a number |
Compatibilità dei browser
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Guarda anche
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis