Przejdź do treści

Układ elastyczny

Elastyczność

(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome)

Rozciągnięcie

selektor { flex-grow: rozciągnięcie }
Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener).

Rozciągnięcie jest wyrażone liczbą naturalną (większą lub równą zero), która określa proporcje, w jakich będą rozciągane elementy w kontenerze. Domyślna wartość - zero - odbiera elementom elastyczność.

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

selektor { flex-shrink: ściśnięcie }
Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener).

Ściśnięcie jest wyrażone liczbą naturalną (większą lub równą zero), która określa proporcje, w jakich będą ściskane elementy w kontenerze (domyślnie - "1").

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

selektor { flex-basis: baza }
Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener).

Baza jest wartością określoną w jednostkach długości albo słowem kluczowym "auto" (domyślnie).

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.

Wartość "auto" rozkłada wolną przestrzeń równomiernie po bokach elementów, a "0" - na całych ich rozmiarach.

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.

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

Atrybuty mieszane

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:

none
flex: none
none

1 0px
flex: 1 0px
2 0px

1 auto
flex: 1 auto
2 auto

1 1 auto
flex: 1 1 auto
1 2 auto

Komentarze

Zobacz więcej komentarzy