Własność CSS flex-basis ustawia początkowy rozmiar jednostki flex w wymiarze głównym. W uproszczeniu można powiedzieć, że w standardowym dokumencie w języku polskim własność ta określa domyślną szerokość jednostek flex.
Zobacz sekcję Rozmiar bazowy w rozdziale Flexbox CSS kursu CSS, aby poznać szczegółowy opis sposobu ustalania rozmiaru bazowego jednostek flex.
Wartości i składnia
Własność flex-basis
przyjmuje takie same wartości, jak własności width
i height
, oraz dodatkowo przyjmuje słowo kluczowe content
.
- Liczba z jednostką długości CSS — określa wprost konkretny rozmiar.
- Wartość procentowa — odnosi się do wewnętrznego rozmiaru w wymiarze głównym kontenera flex. Jeśli rozmiar kontenera jest nieokreślony, to domyślnie stosowana jest wartość
content
auto
— oznacza wartość szerokości w dokumentach o poziomym trybie pisma oraz wartość wysokości w dokumentach o pionowym trybie pisma- max-content — maksymalny rozmiar potrzebny do otoczenia całej treści elementu bez jej zawijania
min-content
— minimalny rozmiar treści, sprowadza się do długości najdłuższego słowafit-content
— dopasowuje rozmiar elementu do treści, maksymalnie do rozmiaru max-contentcontent
— rozmiar jest obliczany automatycznie na podstawie treści jednostki flex. Zazwyczaj wartość ta jest równoznaczna z max-content, ale dodatkowo uwzględnia ustawienia współczynnika kształtu
Podsumowanie
Zastosowanie | Jednostki flex |
---|---|
Obsługiwane wartości | Takie same, jak własności width i height oraz dodatkowo słowo kluczowe content |
Wartość początkowa | auto |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Flexible Box Layout Module Level 1, flex-basis |