Własność CSS flex-basis

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łowa
• fit-content — dopasowuje rozmiar elementu do treści, maksymalnie do rozmiaru max-content
• content — 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