--- title: flex slug: Web/CSS/flex translation_of: Web/CSS/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.

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 {{cssxref("<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 {{cssxref("<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

{{csssyntax}}

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>

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
	raw.style.display = raw.style.display == "none" ? "block" : "none";
});

#flex-container {
	width: 100%;
	font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
	border: 1px solid #f00;
	padding: 1rem;
}

#flex-container > .raw-item {
	border: 1px solid #000;
}

Risultato

Specifiche

Specification	Status	Comment
{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}	{{Spec2('CSS3 Flexbox')}}	Initial definition

Compatibilità con i browser

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	{{CompatGeckoDesktop("18.0")}} (behind a pref) ^{[1] [2]} {{CompatGeckoDesktop("20.0")}} ^[2][3]	21.0{{property_prefix("-webkit")}} 29.0	10.0{{property_prefix("-ms")}} ^[3]^[4] 11.0 ^[3]^[4]	12.10	6.1{{property_prefix("-webkit")}}

Feature	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Basic support	{{CompatUnknown()}}	4.4	11	12.10	7.1{{property_prefix("-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

Using CSS flexible boxes