Flex - CSS-Tricks

flexProprietatea este o sub-proprietate a modulului flexibil Box Layout.

Aceasta este prescurtare pentru flex-grow, flex-shrinkși flex-basis. Al doilea și al treilea parametru ( flex-shrinkși flex-basis) sunt opționale.

Sintaxă

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Iată detaliile referitoare la valorile alocate în funcție de câte valori îi acordați:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Valori comune pentru flex

flex: 0 auto;

Acest lucru este la fel ca flex: initial;și prescurtare pentru valoarea implicită: flex: 0 1 auto. Mărește elementul pe baza width/ heightproprietăților sale (sau a conținutului său, dacă nu este setat).

Face obiectul flexibil inflexibil atunci când mai este spațiu liber, dar îi permite să se micșoreze la minim atunci când nu există suficient spațiu. Abilitățile sau automarginile de aliniere pot fi folosite pentru a alinia elementele flexibile de-a lungul axei principale.

flex: auto;

Acest lucru este echivalent cu flex: 1 1 auto. Atenție, aceasta nu este valoarea implicită. Mărește articolul în funcție de width/ heightproprietățile sale , dar îl face complet flexibil, astfel încât să absoarbă orice spațiu suplimentar de-a lungul axei principale.

Dacă toate articolele sunt fie flex: auto,, flex: initialfie flex: none, orice spațiu rămas după ce elementele au fost dimensionate va fi distribuit uniform către articolele cu flex: auto.

flex: none;

Acest lucru este echivalent cu flex: 0 0 auto. Mărește articolul în funcție de width/ heightproprietățile sale , dar îl face complet inflexibil.

Acest lucru este similar cu flex: initialexcepția faptului că nu este permis să se micșoreze, chiar și într-o situație de revărsare.

contracta:

Echivalent cu flex: 1 0px. Face elementul flexibil flexibil și setează baza flex la zero, rezultând un articol care primește proporția specificată din spațiul rămas.

Dacă toate articolele din containerul flex utilizează acest model, dimensiunile lor vor fi proporționale cu factorul flex specificat.

Demo

Următoarea demonstrație arată un aspect foarte simplu cu Flexbox datorită flexproprietății:

Iată fragmentul revelator de cod:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

În primul rând, am autorizat ca elementele flexibile să fie afișate pe mai multe rânduri cu flex-flow: row wrap.

Apoi le spunem atât antetului, cât și subsolului să ia 100% din lățimea curentă a ferestrei, indiferent de ce.

Și conținutul principal și ambele bare laterale vor împărți același rând, împărțind spațiul rămas după cum urmează: 66% (2 / (1 + 2)) pentru conținutul principal, 33% (1 / (1 + 2)) pentru bara laterală .

Suport pentru browser

• (modern) înseamnă sintaxa recentă din specificație (de exemplu display: flex;)
• (hibrid) înseamnă o sintaxă neoficială ciudată din 2011 (de exemplu display: flexbox;)
• (vechi) înseamnă sintaxa veche din 2009 (de exemplu display: box;)

Crom	Safari	Firefox	Operă	IE	Android	iOS
21+ (modern) 20- (vechi)	3.1+ (vechi)	2-21 (vechi) 22+ (nou)	12.1+ (modern)	10+ (hibrid)	2.1+ (vechi)	3.2+ (vechi)

Browserul Blackberry 10+ acceptă noua sintaxă.

Pentru mai multe informații despre cum să amestecați sintaxele pentru a obține cea mai bună asistență pentru browser, consultați acest articol (CSS-Tricks) sau acest articol (DevOpera).