Flexbox a responzivní vzory

Rozdělení místa mezi prvky flexboxu

Na flexboxu je nejzajímavější, co se stane se zbylým místem v řádku uvnitř flexboxu. Nebo naopak s přebytečným místem, když se položky nevejdou a měly by z něho trčet ven (šířka všech prvků uvnitř je větší než šířka rodičovského kontejneru).

Chování se dá nastavit pomocí tří vlastnosti, které skoro vždy nastavujeme všechny najednou na položky flexboxu (prvky uvnitř flexboxu).

.card {
  /* smí se prvek zvětšovat do volného místa? */
  flex-grow: 1;

  /* smí se zmenšit, když se prvky nevejdou? */
  flex-shrink: 1;

  /*
  námi nastavená velikost, která se považuje za výchozí,
  pokud chceme jinou, než jaká je definovaná obsahem
  */
  flex-basis: 160px;
}

Prvky se do řádku nejprve poskládají za sebe ve velikosti nastavené ve flex-basis. Teprve pak se rozdělí přebytek volného místa (nebo dluh, když je řádek přeplněný) podle hodnot nastacených ve flex-grow a flex-shrink.

Hodnota flex-grow: 2 neznamená dvojnásobnou šířku, ale dvojnásobný díl z toho, co zbylo. Kdyby volné místo nezbylo žádné, nezmění se vůbec nic.

flex-shrink funguje podobně, jen se aplikuje ve chvíli, kdy se všechny prvky do flexboxu nevejdou a je naopak potřeba je zmenšit. flex-shrink pak nastavuje, o kolik dílů z “dluhu” se prvek zmenší.

Pokud do flex-grow nebo flex-shrink nastavíme hodnotu 0, zakážeme prvku se zvětšovat nebo zmenšovat.

Zkrácený zápis

V praxi se všechny tři hodnoty píšou jednou vlastností flex.

.card {
  /* flex: grow shrink basis; */
  flex: 1 1 160px;
}

Často se můžete setkat i se zápisem pouze s jedním číslem.

.card {
  flex: 1;
}

Co se pod tou jedničkou skrývá a čím se liší od flex: auto?

Rozdíl dělá poslední hodnota, tedy flex-basis. U flex: 1 se do řádku nastupuje s nulovou šířkou, takže se rozdělí celá šířka řádku a obsah do toho nemá co mluvit. U flex: auto se nastupuje s šířkou obsahu a dělí se až to, co po něm zbylo.