CSS / Układ elastyczny
Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
W jaki sposób ustawić elastycznie elementy w wierszach lub kolumnach w różnych kierunkach?
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome)
Kierunek elastyczny {flex-direction}
selektor { flex-direction: kierunek }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 elastyczne {flex-wrap}
selektor { flex-wrap: zawijanie }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 przepływu elastycznego {flex-flow}
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}
"flex-flow: row nowrap" - zwróć uwagę, że wszystkie elementy są identycznej wysokości:
blok nr 1
"flex-flow: row wrap" - zwróć uwagę, że wysokość bloków dopasowuje się automatycznie w każdym osobnym wierszu układu:
blok nr 1
flex-flow: row-reverse nowrap
blok nr 1
flex-flow: row-reverse wrap-reverse