Własność CSS flex

> Dodaj do ulubionych

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 lub flex-basis albo słowo kluczowe none.

    Jeśli podana zostanie wartość dla własności flex-grow, to dla pozostałych dwóch własności zostają zastosowane wartości 1 (dla flex-shrink) i 0% (dla flex-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 i flex-grow) zostaje nadana wartość 1.

    Jeśli zostanie podane słowo kluczowe none, wymiary elementu będą określane na podstawie ustawień własności width lub height.

  • Dwie wartościpierwsza musi być prawidłową wartością dla własności flex-grow, a druga — dla własności flex-shrink lub flex-basis. W pierwszym przypadku własności flex-basis zostaje nadana wartość 0%, a w drugim przypadku własności flex-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

ZastosowanieJednostki flex
Własności składowe
Obsługiwane wartościTakie, jak własności składowych
Wartość początkowaflex-grow: 0, flex-shrink: 1, flex-basis: auto
DziedziczenieNie
Specyfikacja CSSCSS Flexible Box Layout Module Level 1, flex
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.