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 value	as each of the properties of the shorthand: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
Applies to	flex items, including in-flow pseudo-elements
Inherited	no
Media	visual
Computed value	as each of the properties of the shorthand: `flex-grow`: as specified `flex-shrink`: as specified `flex-basis`: as specified, but with relative lengths converted into absolute lengths
Animatable	as 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 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>

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
CSS Flexible Box Layout Module The definition of 'flex' in that specification.	Candidate Recommendation	Initial definition

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

Using CSS flexible boxes