Własność CSS flex to własność zbiorcza dla własności flex-grow
, flex-shrink
i flex-basis
, a więc określająca zasady zwiększania i zmniejszania jednostek flex oraz ustawiająca ich domyślny rozmiar początkowy w wymiarze głównym.
Wartości i składnia
Własność flex może przyjmować jedną, dwie lub trzy wartości odpowiadające jej własnościom składowym.
- Jedna wartość — musi to być prawidłowa wartość dla własności
flex-grow
lubflex-basis
albo słowo kluczowenone
.Jeśli podana zostanie wartość dla własności
flex-grow
, to dla pozostałych dwóch własności zostają zastosowane wartości1
(dlaflex-shrink
) i0%
(dlaflex-basis
).Jeśli zostanie podana wartość dla własności
flex-basis
, to każdej z pozostałych dwóch własności (flex-shrink
iflex-grow
) zostaje nadana wartość1
.Jeśli zostanie podane słowo kluczowe
none
, wymiary elementu będą określane na podstawie ustawień własnościwidth
lubheight
. - Dwie wartości — pierwsza musi być prawidłową wartością dla własności
flex-grow
, a druga — dla własnościflex-shrink
lubflex-basis
. W pierwszym przypadku własnościflex-basis
zostaje nadana wartość0%
, a w drugim przypadku własnościflex-shrink
zostaje nadana wartość1
. - Trzy wartości — powinny być podane w następującej kolejności:
flex-grow
flex-shrink
flex-basis
.
Przykłady
W poniższym przykładzie własność flex-grow
jest ustawiona na 2
, własność flex-shrink
na 3
, a własność flex-basis
na 12%
.
flex: 2 3 12%;
Podsumowanie
Zastosowanie | Jednostki flex |
---|---|
Własności składowe | |
Obsługiwane wartości | Takie, jak własności składowych |
Wartość początkowa | flex-grow: 0 , flex-shrink: 1 , flex-basis: auto |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Flexible Box Layout Module Level 1, flex |