Svojstvo flex u CSS-u je skraćenica za flex-grow, flex-shrink, i flex-basis . Radi samo na fleksibilnim stavkama, pa ako stavka spremnika nije fleksibilna stavka, savijati svojstvo neće utjecati na odgovarajuću stavku.

Ovo se svojstvo koristi za postavljanje duljine fleksibilnih stavki. Pozicioniranje podređenih elemenata i glavnog spremnika jednostavno je s ovim CSS svojstvom. Koristi se za postavljanje kako će se fleksibilna stavka smanjivati ​​ili rasti kako bi stala u prostor.

The savijati Svojstvo se može odrediti s jednom, dvije ili tri vrijednosti.

• Kada postoji sintaksa s jednom vrijednošću, vrijednost mora biti ili broj ili ključne riječi kao što je ništa, auto, ili početni .
• Kada postoji sintaksa s dvije vrijednosti, prva vrijednost mora biti broj (koristi se kao flex-grow ), druga vrijednost može biti broj (koristi se za flex-shrink ) ili važeća vrijednost širine (koristi se kao flex-osnova ).
• Kada postoji sintaksa s tri vrijednosti, tada vrijednosti moraju slijediti redoslijed: a broj za flex-grow, a broj za savitljivo skupljanje, i valjan širina vrijednost za flex-osnova .

Sintaksa

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

Vrijednosti imovine

flex-grow: To je pozitivan bezjedinički broj koji određuje faktor rasta savitljivosti. Određuje koliko će stavka rasti u usporedbi s drugim fleksibilnim stavkama. Negativne vrijednosti nisu dopuštene. Ako je izostavljen, tada se postavlja na vrijednost 1 .

savijanje: To je pozitivni broj bez jedinice koji određuje faktor skupljanja pri savijanju. Određuje koliko će se stavka smanjiti u usporedbi s drugim fleksibilnim stavkama. Negativne vrijednosti nisu dopuštene. Ako je izostavljen, tada se postavlja na vrijednost 1 .

fleksibilna osnova: Duljina u relativnim ili apsolutnim jedinicama definira početnu duljinu fleksibilne stavke. Koristi se za postavljanje duljine flex-item-a. Njegove vrijednosti mogu biti auto, naslijediti, ili broj iza kojeg slijede jedinice duljine kao što je em, px, itd. Negativne vrijednosti nisu dopuštene. Ako je izostavljen, tada se postavlja na vrijednost 0 .

auto: Ova vrijednost svojstva flex je ekvivalentna 1 1 auto .

nijedan: Ova vrijednost svojstva flex je ekvivalentna 0 0 auto . Ne raste niti smanjuje fleksibilne predmete.

početni: Postavlja svojstvo na zadanu vrijednost. To je ekvivalentno 0 0 auto .

naslijediti: Nasljeđuje svojstvo od nadređenog elementa.

Primjer

U ovom primjeru postoje tri spremnika, a svaki ima tri fleksibilne stavke. The širina a visina kontejnera su 300 px i 100 px .

Primjenjujemo savijanje: 1; na fleksibilne stavke prvog spremnika, savijanje: 0 50 px; na fleksibilne stavke drugog spremnika, i savijanje: 2 2; fleksibilnim stavkama trećeg spremnika.

 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> 

Izlaz