Proprietatea flex în CSS este prescurtarea pentru flex-creștere, flex-strângere, și baza flexibilă. Funcționează numai pentru articolele flexibile, așa că dacă articolul containerului nu este un articol flexibil, contracta proprietatea nu va afecta articolul corespunzător.

Această proprietate este utilizată pentru a seta lungimea articolelor flexibile. Poziționarea elementelor copil și a containerului principal este ușoară cu această proprietate CSS. Este folosit pentru a seta modul în care un articol flexibil se va micșora sau crește pentru a se potrivi în spațiu.

The contracta proprietatea poate fi specificată de una, două sau trei valori.

• Când există sintaxa cu o singură valoare, valoarea trebuie să fie fie un număr, fie cuvinte cheie precum niciunul, auto, sau iniţială .
• Când există sintaxa cu două valori, prima valoare trebuie să fie un număr (utilizat ca flex-creștere ), a doua valoare poate fi fie un număr (folosit pentru flex-contractie ) sau o valoare validă a lățimii (utilizată ca flex-bază ).
• Când există sintaxă cu trei valori, atunci valorile trebuie să urmeze ordinea: a număr pentru creștere flexibilă, A număr pentru flex-contractie, și un valabil lăţime valoare pentru flex-bază .

Sintaxă

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

Valorile proprietăților

creștere flexibilă: Este un număr pozitiv fără unități care determină factorul de creștere flexibilă. Specifică cât de mult va crește articolul în comparație cu celelalte articole flexibile. Nu sunt permise valori negative. Dacă este omis, atunci se setează la valoarea 1 .

flex-contractie: Este numărul pozitiv fără unități care determină factorul de contracție a flexibilității. Specifică cât de mult se va micșora articolul în comparație cu celelalte articole flexibile. Nu sunt permise valori negative. Dacă este omis, atunci se setează la valoarea 1 .

baza flexibila: Este lungimea în unități relative sau absolute care definește lungimea inițială a articolului flexibil. Este folosit pentru a seta lungimea articolului flexibil. Valorile sale pot fi mașină, moștenire, sau un număr urmat de unitățile de lungime precum em, px, etc. Nu sunt permise valori negative. Dacă este omis, atunci se setează la valoarea 0 .

auto: Această valoare a proprietății flex este echivalentă cu 1 1 auto .

nici unul: Această valoare a proprietății flex este echivalentă cu 0 0 auto . Nu crește și nici nu micșorează elementele flexibile.

iniţială: Setează proprietatea la valoarea sa implicită. Este echivalent cu 0 0 auto .

moşteni: Moștenește proprietatea din elementul părinte.

Exemplu

În acest exemplu, există trei containere, fiecare având trei articole flexibile. The lăţime si inaltimea containerelor sunt 300px și 100px .

Aplicam flex: 1; la articolele flexibile ale primului container, flex: 0 50px; la articolele flexibile ale celui de-al doilea container și flex: 2 2; la elementele flexibile ale celui de-al treilea container.

 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> 

Ieșire