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

Kierunek elastyczny {flex-direction}

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 elastyczne {flex-wrap}

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 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:

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

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`flex-direction: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex-direction: column`	21 2012-07-31	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-direction: column-reverse`	21 2012-07-31	81 2020-09-22	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-direction: row`	21 2012-07-31	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-direction: row-reverse`	21 2012-07-31	81 2020-09-22	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-wrap: wartość`	29 2013-08-20	28 2014-03-18	12 2015-07-29	16 2013-08-27	9 2015-09-30
`flex-wrap: nowrap`	21 2012-07-31	28 2014-03-18	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-wrap: wrap`	21 2012-07-31	28 2014-03-18	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-wrap: wrap-reverse`	21 2012-07-31	28 2014-03-18	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-flow: wartość`	29 2013-08-20	28 2014-03-18	12 2015-07-29	12.1 2012-11-20	9 2015-09-30

Komentarze

Zobacz więcej komentarzy