Własność CSS flex

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ści — pierwsza 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