Przejdź do treści

Układ elastyczny

Przepływ

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

Kierunek

selektor { flex-direction: kierunek }
Selektorem musi być kontener elastyczny.

Kierunek określa sposób układania kolejnych elementów wewnątrz układu elastycznego:
  • row - elementy będą układane w wierszach, analogicznie jak wyrazy tekstu w akapitach (domyślnie)
  • row-reverse - ułożenie w wierszach w przeciwnym kierunku (w języku polskim będzie to od prawej do lewej krawędzi kontenera)
  • column - ułożenie pionowo w kolumnach (w języku polskim - od góry do dołu)
  • column-reverse - ułożenie pionowo w kolumnach (w języku polskim - od dołu do góry)

Polecenie pozwala sterować ułożeniem bloków w sposób podobny do wyrazów w tekście akapitu. Wyrazom jednak nie możemy nadawać rozmiarów, a blokom w układzie elastycznym - tak.

Zawijanie

selektor { flex-wrap: zawijanie }
Selektorem musi być kontener elastyczny.

Zawijanie:
  • nowrap - elementy nie zostaną zawinięte do kolejnego wiersza, nawet jeśli nie zmieszczą się w dostępnej szerokości kontenera (domyślnie)
  • wrap - elementy, które nie zmieszczą się w dostępnej szerokości, zostaną przeniesione do kolejnego wiesza, jak wyrazy tekstu
  • wrap-reverse - niemieszczące się elementy będą przeniesione do wcześniejszego wiersza (w języku polskim wyglądało by to tak, jakbyśmy pisali tekst w wierszach, zaczynając od dołu kartki papieru)

Polecenie pozwala sterować ułożeniem wierszy bloków w sposób podobny do linii w tekście akapitu.

Atrybuty mieszane

selektor { flex-flow: wartości atrybutów }

Polecenie to pozwala od razu podać kierunek i zawijanie elementów w układzie elastycznym.

Przykład:

"flex-flow: row nowrap" - zwróć uwagę, że wszystkie elementy są identycznej wysokości:

To jest
blok nr 1
blok 2
blok 3
blok 4
blok 5

"flex-flow: row wrap" - zwróć uwagę, że wysokość bloków dopasowuje się automatycznie w każdym osobnym wierszu układu:

To jest
blok nr 1
blok 2
blok 3
blok 4
blok 5

flex-flow: row-reverse nowrap

To jest
blok nr 1
blok 2
blok 3
blok 4
blok 5

flex-flow: row-reverse wrap-reverse

blok 1
blok 2
blok 3
blok 4
blok 5

Komentarze

Zobacz więcej komentarzy