Flex-eiendommen i CSS er stenografi for flex-gro, flex-shrink, og flex-basis. Det fungerer bare på flex-varene, så hvis beholderens vare ikke er en flex-vare, bøye seg egenskapen vil ikke påvirke den tilsvarende varen.

Denne egenskapen brukes til å angi lengden på fleksible elementer. Plasseringen av underordnede elementer og hovedbeholderen er enkel med denne CSS-egenskapen. Den brukes til å angi hvordan en flex-vare skal krympe eller vokse for å passe inn i rommet.

De bøye seg egenskap kan spesifiseres med én, to eller tre verdier.

• Når det er en-verdi syntaks, må verdien enten være et tall eller nøkkelordene som f.eks ingen, auto, eller første .
• Når det er toverdisyntaks, må den første verdien være et tall (brukt som flex-vokse ), kan den andre verdien enten være et tall (brukes for flex-krympe ) eller en gyldig breddeverdi (brukt som flex-basis ).
• Når det er syntaks med tre verdier, må verdiene følge rekkefølgen: a Antall for flex-grow, en Antall for bøyelig krympe, og en gyldig bredde verdi for flex-basis .

Syntaks

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

Eiendomsverdier

flex-grow: Det er et positivt enhetsløst tall som bestemmer flex-grow-faktoren. Den spesifiserer hvor mye varen vil vokse sammenlignet med de andre fleksible elementene. Negative verdier er ikke tillatt. Hvis den utelates, settes den til verdien 1 .

flex-shrink: Det er det positive enhetsløse tallet som bestemmer flex shrink-faktoren. Den spesifiserer hvor mye varen vil krympe sammenlignet med de andre fleksible elementene. Negative verdier er ikke tillatt. Hvis den utelates, settes den til verdien 1 .

flex-basis: Det er lengden i relative eller absolutte enheter som definerer startlengden til flex-elementet. Den brukes til å stille inn lengden på flex-elementet. Dens verdier kan være bil, arve, eller et tall etterfulgt av lengdeenhetene som f.eks em, px, osv. Negative verdier er ikke tillatt. Hvis den utelates, settes den til verdien 0 .

auto: Denne verdien av flex-eiendommen tilsvarer 1 1 auto .

ingen: Denne verdien av flex-eiendommen tilsvarer 0 0 auto . Det verken vokser eller krymper flex-elementene.

første: Den setter egenskapen til standardverdien. Det tilsvarer 0 0 auto .

arve: Den arver eiendommen fra det overordnede elementet.

Eksempel

I dette eksemplet er det tre beholdere, som hver har tre flex-elementer. De bredde og høyden på beholderne er 300 piksler og 100 piksler .

Vi bruker bøyning: 1; til flex-elementene til den første beholderen, flex: 0 50px; til flex-elementene til den andre beholderen, og bøyning: 2 2; til flex-elementene til den tredje beholderen.

 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> 

Produksjon