Elastyczność {flex-grow, flex-shrink, flex-basis, flex}

CSS 3

Rozciągnięcie elastyczne {flex-grow} #

selektor { flex-grow: rozciągnięcie }

Może się zdarzyć, że w jednym wierszu kontenera elastycznego mogłoby się zmieścić więcej elementów niż mamy zapewnionych. Wtedy zwykle z prawej strony pozostaje wolna przestrzeń. Możemy jednak sprawić, aby w takiej sytuacji szerokość elementów elastycznie dopasowała się w taki sposób, aby wypełniły całą dostępną przestrzeń kontenera. Jeżeli chcemy, aby wszystkie elementy zostały rozciągnięte równomiernie, wystarczy każdemu przypisać styl "flex-grow: 1". Możemy też zadecydować, aby np. jeden z nich rozszerzył się dwa razy bardziej niż inne - przypisujemy mu wartość "flex-grow: 2". Istnieje również możliwość ustalenia, aby tylko jeden element wypełnił całą pozostałą wolną przestrzeń w kontenerze. Wtedy tylko jemu nadajemy styl "flex-grow: 1".

Ściśnięcie elastyczne {flex-shrink} #

selektor { flex-shrink: ściśnięcie }

Jeżeli kontener elastyczny jest zbyt wąski, jego dzieci są ściskane. Zwykle odbywa się to poprzez przełamanie do nowej linii tekstu, który zawiera się w tych blokach.

Baza elastyczna {flex-basis} #

selektor { flex-basis: baza }

Baza określa początkowy rozmiar elementu w kontenerze, zanim wolna przestrzeń zostanie rozłożona pomiędzy dzieci kontenera.

Wartość "0" (zero) spowoduje, że rozmiary elementów będą bezpośrednio proporcjonalne do przypisanych im wartości flex-grow (albo flex-shrink - w przypadku ściśnięcia). Jeżeli wszystkie elementy kontenera będą miały przypisany styl "flex-grow: 1", w efekcie mogą zostać rozciągnięte do dokładnie takiego samego rozmiaru.

Wartość "auto" (domyślnie) spowoduje, że rozmiary absolutne poszczególnych elementów mogą nie być równe, ponieważ wolna przestrzeń rozłoży się proporcjonalnie tylko po bokach wewnątrz elementów.

Źródło: CSS Flexible Box Layout Module

Powyższy diagram przedstawia różnice między "absolutną" (baza zerowa) a "relatywną" (baza zależna od zawartości elementów) elastycznością. Kolejne elementy w poszczególnych kontenerach elastycznych mają przypisaną wartość flex-grow odpowiednio: 1, 1, 2.

Atrybuty mieszane elastyczności {flex} #

selektor { flex: wartości atrybutów }

Polecenie to pozwala od razu podać rozciągnięcie, ściśnięcie i bazę elementów w układzie elastycznym. Każda z wartości jest opcjonalna, przy czym jeśli chcemy podać flex-shrink, należy obowiązkowo poprzedzić ją wartością flex-grow. Nie ma możliwości określenia w ten sposób samego ściśnięcia bez ustalania rozciągnięcia. Ponadto jeśli chcemy określić zerową długość flex-basis, trzeba koniecznie dopisać do niej jednostkę. Choć normalnie jednostka przy wartości zero nie jest wymagana, tutaj zapobiega omyłkowemu uznaniu długości bazy za rozciągnięcie lub ściśnięcie. Jednostkę można pominąć tylko, kiedy w deklaracji występują wszystkie trzy wartości.

Jako wartości atrybutów można wpisać również samo słowo kluczowe "none", co odpowiada: "0 0 auto" ("flex-grow: 0; flex-shrink: 0; flex-basis: auto"). Warto zauważyć, że domyślna wartość tych atrybutów jest inna - "0 1 auto".

Z uwagi na fakt, że składnia tego polecenia przewiduje najczęstsze przypadki użycia, zaleca się stosować zawsze atrybuty mieszane zamiast osobnych poleceń.

Przykład {flex}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari	Poziom wsparcia min. 2,5 roku
flex-grow: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30	100%
flex-shrink: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30	100%
flex-basis: wartość	29 2013-08-20	22 2013-06-25	12 2015-07-29	12.1 2012-11-20	9 2015-09-30	100%
flex-basis: auto	22 2012-09-25	22 2013-06-25	12 2015-07-29	12.1 2012-11-20	9 2015-09-30	100%
flex: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30	100%
flex: none	21 2012-07-31	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	7 2013-10-22	100%