Flex-ejendommen i CSS er en forkortelse for flex-grow, flex-shrink, og flex-basis. Det virker kun på flex-varerne, så hvis beholderens vare ikke er en flex-vare, bøje ejendom vil ikke påvirke den tilsvarende vare.

Denne egenskab bruges til at indstille længden af ​​fleksible emner. Placeringen af ​​underordnede elementer og hovedbeholderen er let med denne CSS-egenskab. Den bruges til at indstille, hvordan en flex-vare skal krympe eller vokse, så den passer ind i rummet.

Det bøje egenskab kan angives med én, to eller tre værdier.

• Når der er en-værdi syntaks, skal værdien enten være et tal eller nøgleordene som f.eks ingen, auto, eller initial .
• Når der er syntaks med to værdier, skal den første værdi være et tal (brugt som flex-grow ), kan den anden værdi enten være et tal (bruges til flex-krympe ) eller en gyldig breddeværdi (brugt som flex-basis ).
• Når der er tre-værdi syntaks, så skal værdierne følge rækkefølgen: a nummer for flex-grow, -en nummer for flex-shrink, og en gyldig bredde værdi for flex-basis .

Syntaks

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

Ejendomsværdier

flex-grow: Det er et positivt enhedsløst tal, der bestemmer flex-grow-faktoren. Det specificerer, hvor meget varen vil vokse i forhold til de andre fleksible varer. Negative værdier er ikke tilladt. Hvis den udelades, sættes den til værdien 1 .

flex-shrink: Det er det positive enhedsløse tal, der bestemmer flex shrink-faktoren. Det specificerer, hvor meget varen vil krympe sammenlignet med de andre fleksible varer. Negative værdier er ikke tilladt. Hvis den udelades, sættes den til værdien 1 .

flex-basis: Det er længden i relative eller absolutte enheder, der definerer den oprindelige længde af flex-elementet. Den bruges til at indstille længden af ​​flex-emnet. Dens værdier kan være bil, arve, eller et tal efterfulgt af længdeenhederne som f.eks em, px, osv. Negative værdier er ikke tilladt. Hvis den udelades, sættes den til værdien 0 .

auto: Denne værdi af flexejendommen svarer til 11 auto .

ingen: Denne værdi af flexejendommen svarer til 0 0 auto . Det hverken vokser eller krymper flex-emnerne.

initial: Det indstiller egenskaben til sin standardværdi. Det svarer til 0 0 auto .

arve: Det arver egenskaben fra dets overordnede element.

Eksempel

I dette eksempel er der tre beholdere, der hver har tre flex-elementer. Det bredde og højden af ​​beholderne er 300 px og 100 px .

Vi anvender bøjning: 1; til flex-emnerne i den første container, flex: 0 50px; til flex-emnerne i den anden beholder, og flex: 2 2; til flex-emnerne i den tredje beholder.

 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> 

Produktion