Własność CSS flex-basis

> Dodaj do ulubionych

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

ZastosowanieJednostki flex
Obsługiwane wartościTakie same, jak własności width i height oraz dodatkowo słowo kluczowe content
Wartość początkowaauto
DziedziczenieNie
Specyfikacja CSSCSS Flexible Box Layout Module Level 1, flex-basis
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.