Flexbox a responzivní vzory

Zarovnání a zalomení

Kolem zarovnání ve Flexboxu bývá zmatek a má jednu příčinu: zarovnává se podél tzv. hlavní a vedlejší osy. Neříkáme tedy vodorovně nebo svisle.

Hlavní osa ve flexboxu ve výchozím stavu vede vodorovně zleva doprava. To platí v našem západním světě. Jiné jazyky mohou mít jiné konvence a hlavní osa může směřovat jinak.

Vedlejší osa standardně směřuje shora dolů (opět: u nás, jinde to může být jinak).

Už víme, že směr hlavní osy můžeme ve flexboxu změnit pomocí flex-direction. Vedlejší osa je vždy kolmá na hlavní osu.

Zarovnávání položek ve flexboxu řídí dvě vlastnosti:

• justify-content ve směru hlavní osy
• align-items ve směru vedlejší osy

.nav {
  display: flex;
  gap: 12px;

  /*
  zarovnání podél hlavní osy
  ve výchozím stavu vodorovně
  */
  justify-content: space-between;

  /*
  zarovnání podél vedlejší osy
  ve výchozím stavu svisle
  */
  align-items: center;
}

Dokud je směr row, je hlavní osa vodorovná a všechno sedí, jak čekáme. Jakmile se přepne na column, obě vlastnosti si role prohodí – justify-content najednou řeší svislé rozmístění a align-items vodorovné.

Zalomení ve flexboxu

Pokud se prvky do flexboxu nevejdou, můžeme pomocí vlastnosti flex-wrap nastavit, že se mají zalomit na další řádek.

.tags {
  display: flex;
  gap: 8px;

  /* zalomení */
  flex-wrap: wrap;
}

Mohlo by to vypadat, že jsme najednou z flexboxu vyrobili grid - má řádky a v nich “sloupce”, ale není to tak. Každý zalomený řádek si o šířce prvků rozhoduje sám, takže prvky na druhém řádku mohou mít úplně jiné šířky, než prvky na prvním řádku. Prvky pod sebou nelícují (mohou, ale nemusí). V gridu prvky dodržují nastavené sloupce a přesně zapadají pod sebe.

Kdy grid a kdy flexbox

Když mají prvky dodržovat nastavené rozložení sloupců, volíme grid. Když mohou být různě široké a nemohou dodržovat přesnou mřížku, volíme flexbox.

V praxi se v rámci jedné stránky setkáme s oběma a je to úplně v pořádku: např. mřížka drží rozvržení stránky, Flexbox obsah uvnitř jednotlivých karet.