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> Test det nu Produktion
