Sommario
La proprietà flex
di CSS è una proprietà shorthand usata per modificare le dimensioni di un elemento flessibile e riempire gli spazi. Gli elementi flex possono essere usati per distribuire lo spazio in modo proporzionale, al loro allargarsi o al loro restringersi, per evitare sovrapposizioni o eccedenze.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Vedi L'Uso di flexible boxes per altre proprietà e informazioni.
Sintassi
/* 0 0 auto */
flex: none;
/* Un valore, numero senza unità: flex-grow */
flex: 2;
/* Un valore, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Due valori: flex-grow | flex-basis */
flex: 1 30px;
/* Due valori: flex-grow | flex-shrink */
flex: 2 2;
/* Tre valori: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Valori globali */
flex: inherit;
flex: initial;
flex: unset;
Valori
<'flex-grow'>
- Il valore
flex-grow
appartiene all'elemento flex. Vedi<number>
per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1. <'flex-shrink'>
- Il valore
flex-shrink
appartiene all'elemento flex. Vedi<number>
per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1. <'flex-basis'>
- Il valore
flex-basis
appartiene all'elemento flex. Qualsiasi valore valido per width e heigth è accettato. La dimensione con valore 0 deve avere un'unità, per evitare di essere interpretata come un valore di flessibilità. Quando non si inseriscono valori, quello predefinito è 0%. none
- Questo valore viene interpretato come:
0 0 auto
. -
Sintassi formale
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Example
#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
Risultato
Specifiche
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex' in that specification. |
Candidate Recommendation | Initial definition |
Compatibilità con i browser
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 18.0 (18.0) (behind a pref) [1] [2] 20.0 (20.0) [2][3] |
21.0-webkit 29.0 |
10.0-ms [3][4] 11.0 [3][4] |
12.10 | 6.1-webkit |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 4.4 | 11 | 12.10 | 7.1-webkit |
[1] Per attivare il supporto FlexBox per Firefox 18 e 19, l'utente deve cambiare la about: config preferenza "layout.css.flexbox.enabled" true.
[2] Multi-line flexbox sono supportate da Firefox 28.
[3] Internet Explorer 10-11 (ma non 12+) ignora l'uso di calc()
nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi Flexbug #8 per maggiori informazioni.
[4] In Internet Explorer 10-11 (ma non 12+), una dichiarazione flessibile con un valore senza unità nella sua parte flex-base è considerato sintatticamente valido e sarà quindi ignorata. Una soluzione è quella di includere sempre una unità nella parte flex-base del valore di shorthand di flex. Vedi Flexbug #4 per ulteriori informazioni.