MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

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:
Animatableas each of the properties of the shorthand:
  • flex-grow: yes, as a number
  • flex-shrink: yes, as a number
  • flex-basis: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
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

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

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: Sebastianz, Renatvs88
 Ultima modifica di: Sebastianz,