Lastnost flex v CSS je okrajšava za flex-grow, flex-shrink, in flex-osnova. Deluje samo na flex-itemih, tako da če postavka vsebnika ni flex-item, flex Lastnost ne bo vplivala na ustrezen element.

Ta lastnost se uporablja za nastavitev dolžine prilagodljivih postavk. Postavitev podrejenih elementov in glavnega vsebnika je preprosta s to lastnostjo CSS. Uporablja se za nastavitev, kako se bo flex-item skrčil ali povečal, da bo ustrezal prostoru.

The flex lastnost lahko določite z eno, dvema ali tremi vrednostmi.

• Če obstaja sintaksa z eno vrednostjo, mora biti vrednost številka ali ključne besede, kot je nič, samodejno, oz začetnica .
• Če obstaja sintaksa dveh vrednosti, mora biti prva vrednost številka (uporablja se kot flex-grow ), je druga vrednost lahko številka (uporablja se za flex-shrink ) ali veljavno vrednost širine (uporablja se kot flex-osnova ).
• Če obstaja sintaksa treh vrednosti, morajo vrednosti slediti vrstnemu redu: a število za flex-grow, a število za flex-shrink, in veljaven premer vrednost za flex-osnova .

Sintaksa

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

Vrednosti nepremičnin

flex-grow: To je pozitivno število brez enote, ki določa faktor upogibne rasti. Določa, koliko bo element zrasel v primerjavi z drugimi prilagodljivimi predmeti. Negativne vrednosti niso dovoljene. Če je izpuščen, se nastavi na vrednost 1 .

flex-shrink: To je pozitivno število brez enote, ki določa faktor upogibnega krčenja. Določa, koliko se bo element skrčil v primerjavi z drugimi prilagodljivimi predmeti. Negativne vrednosti niso dovoljene. Če je izpuščen, se nastavi na vrednost 1 .

fleksibilna osnova: Dolžina v relativnih ali absolutnih enotah določa začetno dolžino fleksibilnega elementa. Uporablja se za nastavitev dolžine flex-itema. Njegove vrednosti so lahko avto, dedovanje, ali številko, ki ji sledijo enote za dolžino, kot npr em, px, itd. Negativne vrednosti niso dovoljene. Če je izpuščen, se nastavi na vrednost 0 .

avto: Ta vrednost lastnosti flex je enakovredna 11 avto .

nič: Ta vrednost lastnosti flex je enakovredna 0 0 avto . Fleksibilnih predmetov niti ne poveča niti ne skrči.

začetnica: Lastnost nastavi na privzeto vrednost. To je enakovredno 0 0 avto .

podedovati: Lastnost podeduje od nadrejenega elementa.

Primer

V tem primeru so trije vsebniki, od katerih ima vsak tri fleksibilne elemente. The premer in višina posod sta 300 slikovnih pik in 100 slikovnih pik .

Uporabljamo upogib: 1; na flex-iteme prvega vsebnika, upogljivost: 0 50 slikovnih pik; na flex-iteme drugega vsebnika in upogib: 2 2; na flex-iteme tretjega vsebnika.

 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> 

Izhod