flex

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 valueas each of the properties of the shorthand:
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.

Guarda altro