• 
  Flexbox

  Jakie zaawansowane możliwości daje elastyczny układ rozplanowania elementów na stronie?

• 
  Kontener elastyczny {display: flex inline-flex}

  Jak przełączyć sposób rozpalnowania elementów na 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?

• 
  Kolejność {order}

  Jak zmienić kolejność wyświetlania elementów na stronie?

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

  Jak sprawić, aby rozmiary elementów elastycznie dopasowały się do ich zawartości w wolnej przestrzeni na stronie?

• 
  Marginesy automatyczne

  Jak elastycznie dopasować margines elementu, tak aby wypełnił wolną przestrzeń?

• 
  Justowanie zawartości {justify-content}

  Jak równomiernie wyrównać elementy na stronie?

• 
  Wyrównanie wiersza {align-items, align-self}

  Co zrobić, aby wyśrodkować blok w pionie?

• 
  Wyrównanie wierszy {align-content}

  Jak ustawić bloki w wierszach na dole, na górze albo równomiernie na całej dostępnej wysokości?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

W zamierzchłych czasach sieci, gdy style CSS nie były jeszcze tak rozwinięte jak dzisiaj, rozplanowanie elementów na stronie realizowano się przy pomocy tabelek. Nie był to jednak najlepszy sposób, gdyż nie spełniał podstawowych zasad semantyki. Tabele zostały stworzone z myślą o prezentacji zbioru danych o powtarzającym się charakterze. Na szczęście style CSS wprowadziły nowe sposoby układania elementów na stronie, bez potrzeby używania w niewłaściwy sposób znaczników tabeli. Paradoksalnie właściwość position (pozycja) nie nadawała się zbytnio do ustalania głównego układu elementów na stronie, ponieważ wymagała, aby rozmiary bloków były z góry znane. W praktyce z taką sytuacją rzadko mamy do czynienia, gdyż nie jesteśmy w stanie od razu dokładnie przewidzieć, ile tekstu będą zawierać artykuły, opublikowane w serwisie.

Rozwiązaniem miało być płynne ustalanie pozycji przy pomocy właściwości float [zobacz: Szablon strony na DIV-ach]. I rzeczywiście w większości typowych zastosowań taki sposób był zupełnie wystarczający. Niestety w pewnych szczególnych przypadkach miał podobne ograniczenia jak pozycja absolutna. Bardzo trudno było zrealizować, zdawać by się mogło, tak trywialne sposoby układania elementów, jak wyśrodkowanie w pionie czy ustawienie kilku kolumn obok siebie przy zachowaniu takiej samej ich wysokości. W niektórych sytuacjach cierpiała na tym dostępność serwisu. Syntezatory mowy, stosowane w przeglądarkach używanych przez osoby niewidome, odczytują treść strony w kolejności jej występowanie w kodzie źródłowym HTML, a nie wizualnego ułożenia bloków na ekranie. Dlatego często korzystniej jest, aby najpierw w kodzie umieścić treść artykułu, a dopiero po niej rozbudowane menu nawigacyjne. Niestety w takiej sytuacji nie można było stworzyć prawdziwie elastycznego układu strony, z kolumną menu po lewej stronie, a treścią artykułu zajmującą całą wolną przestrzeń po prawej.

Na szczęście CSS3 rozwiązuje ten problem. Nie trzeba już stosować tabelek, pozycji absolutnych ani trików z płynnym układaniem elementów. Dzięki koncepcji układu elastycznego (ang. flexible box layout lub w skrócie: flexbox) dostajemy zaawansowane możliwości rozplanowania bloków na stronie, przy jednoczesnym automatycznym dopasowywaniu się całego układu, tak aby dokładnie spełniał nasze oczekiwania, bez względu na ilość treści w poszczególnych blokach na stronie.

CSS 3

1. Układ elastyczny w bloku:

   selektor { display: flex }

2. Układ elastyczny w linii:

   selektor { display: inline-flex }

Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci układane są elastycznie. Sam kontener nie jest układany elastycznie na stronie, a jedynie jego dzieci. Wstawienie takiego kontenera przełącza tryb wyświetlania elementów w nim zawartych na układ elastyczny.

Aby jakiekolwiek własności, opisane dalej w tym rozdziale, dały widoczny efekt, konieczne jest dodanie powyższego stylu do elementu, który ma wyznaczać układ elastyczny.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
display: flex	29 2013-08-20	20 2013-04-02	12 2015-07-29	16 2013-08-27	9 2015-09-30
display: inline-flex	29 2013-08-20	20 2013-04-02	12 2015-07-29	16 2013-08-27	9 2015-09-30

CSS 3

Kierunek elastyczny {flex-direction}

selektor { flex-direction: kierunek }

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 }

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:

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

flex-flow: row-reverse nowrap

flex-flow: row-reverse wrap-reverse

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

CSS 3

selektor { order: kolejność }

Możliwość swobodnego ustalania kolejności wyświetlania się elementów to następna duża zaleta układu elastycznego. Przy wstawiania znaczników HTML do kodu źródłowego już nie musimy się martwić, aby były one osadzone w kolejności odpowiedniej do ich poprawnego wyświetlenia - zgodnie z zaprojektowaną grafiką serwisu.

Dzięki temu możemy tworzyć bardziej dostępne dokumenty. Przykładowo dla osoby niewidomej, która używa przeglądarki z syntezatorem mowy, prawdopodobnie korzystniej będzie, jeśli zapoznając się z katalogiem produktów w sklepie internetowym, najpierw usłyszy informacje o nazwie produktu, a potem jego opis. Zdjęcie jest w tym przypadku zupełnie nieważne, dlatego najlepiej jest wstawić je na końcu. Jednak dla użytkowników z dobrym wzrokiem właśnie zdjęcie może okazać się najważniejsze. Umieszczając je w kontenerze elastycznym, a następnie określając dla niego styl "order: -1", wyświetlimy go na początku, podczas gdy syntezator mowy trafi na niego dopiero na końcu. W ten sposób potrzeby obu grup użytkowników zostaną spełnione.

Przykład {order}

Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało pójścia na pewne kompromisy.

<div id="top">
	<div id="TRESC">Treść strony...</div>
	<div id="MENU">Menu nawigacyjne</div>
</div>

#top {
	display: flex;
}

#MENU {
	width: 150px;
	min-width: 150px;
	order: -1;
}

[porównaj: Płynny szablon]

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
order: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30

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
flex-grow: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
flex-shrink: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
flex-basis: wartość	29 2013-08-20	22 2013-06-25	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
flex-basis: auto	22 2012-09-25	22 2013-06-25	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
flex: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
flex: none	21 2012-07-31	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	7 2013-10-22

selektor { margin-top: auto }
selektor { margin-right: auto }
selektor { margin-bottom: auto }
selektor { margin-left: auto }
selektor { margin: auto }

Ustawiając wybrany margines na wartość automatyczną sprawimy, że wypełni on wolną przestrzeń pozostałą w kontenerze. Dzięki temu w bardzo prosty sposób możemy ustawić kilka bloków w jednej linii - część przy lewej krawędzi, a niektóre przy prawej.

Przykład {display: flex, margin-left: auto}

CSS 3

selektor { justify-content: justowanie }

Polecenie steruje justowaniem elementów kontenera elastycznego, gdy jest on zbyt duży, aby został wypełniony w całości. Działa analogicznie jak justowanie tekstu, ale może operować na blokach.

Przykład {justify-content}

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
justify-content: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30

CSS 3

Wspólne wyrównanie wiersza {align-items}

selektor { align-items: wyrównanie }

Polecenie steruje wyrównaniem jednego wiersza wewnątrz kontenera elastycznego, kiedy mają one różną wysokość.

Przykład {align-items}

align-items: flex-start

align-items: flex-end

"align-items: center" - ten sposób pozwala wyśrodkować w pionie element, nawet jeżeli z góry nie wiemy, ile treści będzie się w nim znajdować:

align-items: baseline

align-items: stretch

Indywidualne wyrównanie wiersza {align-self}

selektor { align-self: wyrównanie }

Wyrównanie indywidualne pozwala ustawić w różny sposób każdy z elementów kontenera elastycznego. Jeżeli jednak wszystkie mają być wyrównane tak samo, korzystniej będzie zrobić to dla nich wspólnie.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
align-items: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	16 2013-08-27	9 2015-09-30
align-self: wartość	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30

CSS 3

selektor { align-content: wyrównanie }

Polecenie steruje wyrównaniem wielu wierszy wewnątrz kontenera elastycznego, kiedy ich sumaryczna wysokość jest za mała, aby wypełnić całą dostępną przestrzeń.

Przykład {align-content}

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: stretch

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
align-content: wartość	29 2013-08-20	28 2014-03-18	12 2015-07-29	16 2013-08-27	9 2015-09-30

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak przełączyć sposób rozpalnowania elementów na układ elastyczny?

selektor { display: flex }

selektor { display: inline-flex }

Zobacz więcej...

W jaki sposób ustawić elastycznie elementy w wierszach lub kolumnach w różnych kierunkach?

selektor { flex-direction: kierunek }

selektor { flex-wrap: zawijanie }

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

Zobacz więcej...

Jak zmienić kolejność wyświetlania elementów na stronie?

selektor { order: kolejność }

Zobacz więcej...

Jak sprawić, aby rozmiary elementów elastycznie dopasowały się do ich zawartości w wolnej przestrzeni na stronie?

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

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

selektor { flex-basis: baza }

selektor { flex: wartości atrybutów }

Zobacz więcej...

Jak elastycznie dopasować margines elementu, tak aby wypełnił wolną przestrzeń?

selektor { margin-top: auto }
selektor { margin-right: auto }
selektor { margin-bottom: auto }
selektor { margin-left: auto }
selektor { margin: auto }

Zobacz więcej...

Jak równomiernie wyrównać elementy na stronie?

selektor { justify-content: justowanie }

Zobacz więcej...

Co zrobić, aby wyśrodkować blok w pionie?

selektor { align-items: wyrównanie }

selektor { align-self: wyrównanie }

Zobacz więcej...

Jak ustawić bloki w wierszach na dole, na górze albo równomiernie na całej dostępnej wysokości?

selektor { align-content: wyrównanie }

Zobacz więcej...