Flex-egenskapen i CSS är en förkortning för flex-växa, flex-krympa, och flex-bas. Det fungerar bara på flex-artiklarna, så om behållarens artikel inte är en flex-artikel, böja egenskapen kommer inte att påverka motsvarande objekt.

Den här egenskapen används för att ställa in längden på flexibla föremål. Placeringen av underordnade element och huvudbehållaren är lätt med denna CSS-egenskap. Den används för att ställa in hur en flex-artikel ska krympa eller växa för att passa i utrymmet.

De böja egenskap kan anges med ett, två eller tre värden.

• När det finns ettvärdessyntaxen måste värdet antingen vara ett tal eller nyckelorden som t.ex ingen, auto, eller första .
• När det finns syntaxen med två värden måste det första värdet vara ett tal (används som flex-växa ), kan det andra värdet antingen vara ett tal (används för flex-krympa ) eller ett giltigt breddvärde (används som flex-bas ).
• När det finns trevärdessyntax måste värdena följa ordningen: a siffra för flex-växa, a siffra för flex-krympa, och en giltig bredd värde för flex-bas .

Syntax

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

Fastighetsvärden

flex-grow: Det är ett positivt enhetslöst tal som bestämmer flex-tillväxtfaktorn. Den anger hur mycket objektet kommer att växa jämfört med de andra flexibla objekten. Negativa värden är inte tillåtna. Om den utelämnas ställs den in på värdet 1 .

flex-krympa: Det är det positiva enhetslösa talet som bestämmer flexshrinkfaktorn. Den anger hur mycket föremålet kommer att krympa jämfört med de andra flexibla föremålen. Negativa värden är inte tillåtna. Om den utelämnas ställs den in på värdet 1 .

flex-bas: Det är längden i relativa eller absoluta enheter som definierar den initiala längden på flex-artikeln. Den används för att ställa in längden på flex-artikeln. Dess värderingar kan vara bil, ärva, eller ett tal följt av längdenheterna som t.ex em, px, etc. Negativa värden är inte tillåtna. Om den utelämnas ställs den in på värdet 0 .

bil: Detta värde på flexfastigheten motsvarar 1 1 auto .

ingen: Detta värde på flexfastigheten motsvarar 0 0 auto . Det varken växer eller krymper flex-artiklarna.

första: Den ställer in egenskapen till dess standardvärde. Det motsvarar 0 0 auto .

ärva: Det ärver egenskapen från dess överordnade element.

Exempel

I det här exemplet finns det tre behållare som var och en har tre flexartiklar. De bredd och behållarnas höjd är 300 pixlar och 100 pixlar .

Vi tillämpar flex: 1; till flexartiklarna i den första behållaren, flex: 0 50px; till flex-artiklarna i den andra behållaren, och flex: 2 2; till flexartiklarna i den tredje behållaren.

 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