La proprietà flex nei CSS è l'abbreviazione di flessione-crescita, flessione-restringimento, e base flessibile. Funziona solo con gli articoli flessibili, quindi se l'articolo del contenitore non è un articolo flessibile, il flettere la proprietà non influirà sull'elemento corrispondente.

Questa proprietà viene utilizzata per impostare la lunghezza degli elementi flessibili. Il posizionamento degli elementi figlio e del contenitore principale è semplice con questa proprietà CSS. Viene utilizzato per impostare il modo in cui un articolo flessibile si ridurrà o crescerà per adattarsi allo spazio.

IL flettere La proprietà può essere specificata da uno, due o tre valori.

• Quando è presente la sintassi a valore singolo, il valore deve essere un numero o parole chiave come nessuno, automatico, O iniziale .
• Quando è presente la sintassi a due valori, il primo valore deve essere un numero (utilizzato come crescita flessibile ), il secondo valore può essere un numero (utilizzato per termoretraibile ) o un valore di larghezza valido (utilizzato come base flessibile ).
• Quando è presente una sintassi a tre valori, i valori devono seguire l'ordine: a numero per il crescita flessibile, UN numero per il termoretraibile, e un valido larghezza valore per base flessibile .

Sintassi

 flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit; 

Valori delle proprietà

crescita flessibile: È un numero positivo senza unità che determina il fattore di crescita flessibile. Specifica quanto crescerà l'articolo rispetto agli altri articoli flessibili. Non sono ammessi valori negativi. Se viene omesso, viene impostato sul valore 1 .

termoretraibile: È il numero positivo senza unità che determina il fattore di contrazione flessibile. Specifica quanto l'articolo si ridurrà rispetto agli altri articoli flessibili. Non sono ammessi valori negativi. Se viene omesso, viene impostato sul valore 1 .

base flessibile: È la lunghezza in unità relative o assolute che definisce la lunghezza iniziale dell'articolo flessibile. Viene utilizzato per impostare la lunghezza dell'elemento flessibile. I suoi valori possono essere macchina, ereditare, o un numero seguito dalle unità di lunghezza come em, px, ecc. Non sono ammessi valori negativi. Se viene omesso, viene impostato sul valore 0 .

auto: Questo valore della proprietà flex è equivalente a 1 1 automatico .

nessuno: Questo valore della proprietà flex è equivalente a 0 0 automatico . Non fa né crescere né restringere gli articoli flessibili.

iniziale: Imposta la proprietà sul suo valore predefinito. È equivalente a 0 0 automatico .

ereditare: Eredita la proprietà dal suo elemento genitore.

Esempio

In questo esempio sono presenti tre contenitori, ciascuno contenente tre elementi flessibili. IL larghezza e l'altezza dei contenitori sono 300px E 100px .

Stiamo applicando il flessibilità: 1; agli articoli flessibili del primo contenitore, flessibilità: 0 50px; agli elementi flessibili del secondo contenitore e flessibile: 2 2; agli articoli flessibili del terzo contenitore.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

Produzione