Właściwość flex w CSS jest skrótem od elastyczny wzrost, elastyczny skurcz, i elastyczne. Działa to tylko na elementach elastycznych, więc jeśli element kontenera nie jest elementem elastycznym, przewód właściwość nie będzie miała wpływu na odpowiadający jej element.

Ta właściwość służy do ustawiania długości elastycznych elementów. Dzięki tej właściwości CSS pozycjonowanie elementów podrzędnych i głównego kontenera jest łatwe. Służy do ustawienia sposobu, w jaki element elastyczny będzie się zmniejszał lub powiększał, aby dopasować się do przestrzeni.

The przewód właściwość można określić za pomocą jednej, dwóch lub trzech wartości.

• W przypadku składni jednowartościowej wartość musi być liczbą lub słowami kluczowymi, takimi jak żaden, automatyczny, Lub wstępny .
• W przypadku składni składającej się z dwóch wartości pierwsza wartość musi być liczbą (używaną jako elastyczny wzrost ), druga wartość może być liczbą (używaną do flex-shrink ) lub prawidłową wartość szerokości (używaną jako podstawa elastyczna ).
• W przypadku składni składającej się z trzech wartości wartości muszą być zgodne z kolejnością: a numer dla elastyczny wzrost, A numer dla flex-shrink, i ważny szerokość wartość dla podstawa elastyczna .

Składnia

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

Wartości nieruchomości

elastyczny wzrost: Jest to dodatnia liczba bez jednostki, która określa współczynnik wzrostu elastyczności. Określa, jak bardzo przedmiot wzrośnie w porównaniu z innymi elastycznymi przedmiotami. Wartości ujemne są niedozwolone. Jeśli zostanie pominięty, ustawiana jest na wartość 1 .

flex-shrink: Jest to dodatnia liczba bezjednostkowa, która określa współczynnik skurczu przy zginaniu. Określa, jak bardzo element się zmniejszy w porównaniu do innych elastycznych elementów. Wartości ujemne są niedozwolone. Jeśli zostanie pominięty, ustawiana jest na wartość 1 .

podstawa elastyczna: Jest to długość wyrażona w jednostkach względnych lub bezwzględnych, która definiuje początkową długość elementu elastycznego. Służy do ustawiania długości elementu elastycznego. Jego wartości mogą być samochód, odziedziczyć, lub liczbę, po której następują jednostki długości, takie jak Em, px, itp. Wartości ujemne są niedozwolone. Jeśli zostanie pominięty, ustawiana jest na wartość 0 .

automatyczny: Ta wartość właściwości flex jest równoważna 1 1 auto .

nic: Ta wartość właściwości flex jest równoważna 0 0 automat . Nie zwiększa ani nie kurczy elementów elastycznych.

wstępny: Ustawia właściwość na jej wartość domyślną. Jest to równoważne 0 0 automat .

dziedziczyć: Dziedziczy właściwość od elementu nadrzędnego.

Przykład

W tym przykładzie są trzy kontenery, każdy z trzema elastycznymi elementami. The szerokość i wysokość pojemników wynoszą 300 pikseli I 100 pikseli .

Stosujemy elastyczność: 1; do elementów elastycznych pierwszego kontenera, elastyczny: 0 50 pikseli; do elementów elastycznych drugiego kontenera i elastyczność: 2 2; do elementów elastycznych trzeciego kontenera.

 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> 

Wyjście