Flexbox – rozvržení prvků

Co je flexbox?

Flexbox (celým názvem Flexible Box Layout) je CSS modul pro rozvržení prvků v jednom směru – buď horizontálně (v řádku), nebo vertikálně (ve sloupci). Funguje na principu kontejneru a jeho potomků:

• Flex kontejner – rodičovský prvek, na který nastavíš display: flex.
• Flex položky – přímí potomci kontejneru, kteří se automaticky přizpůsobí pravidlům flexboxu.

<div class="nav">
  <a href="index.html">Úvod</a>
  <a href="o-mne.html">O mně</a>
  <a href="kontakt.html">Kontakt</a>
</div>

.nav {
  display: flex;
  gap: 1rem;
}

Výsledek: tři odkazy budou automaticky vedle sebe s mezerou 1rem.

Směr a zalamování – flex-direction a flex-wrap

flex-direction

Určuje, v jakém směru se položky řadí:

• row (výchozí) – zleva doprava
• row-reverse – zprava doleva
• column – shora dolů
• column-reverse – zdola nahoru

flex-wrap

Výchozí chování je, že se všechny položky vejdou do jednoho řádku – i kdyby se musely zmenšit. flex-wrap: wrap umožní jejich zalomení na nový řádek:

.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Zarovnání – justify-content a align-items

justify-content – zarovnání v hlavní ose

Hlavní osa je ve směru flex-direction (výchozí: vodorovně):

• flex-start (výchozí) – zarovnání doleva
• flex-end – zarovnání doprava
• center – vycentrování
• space-between – první a poslední u krajů, ostatní rovnoměrně
• space-around – rovnoměrné mezery kolem každé položky
• space-evenly – naprosto stejné mezery mezi všemi položkami

align-items – zarovnání v příčné ose

Příčná osa je kolmá na flex-direction (výchozí: svislá):

• stretch (výchozí) – položky se roztáhnou na celou výšku kontejneru
• center – svislé vycentrování
• flex-start – zarovnání nahoru
• flex-end – zarovnání dolů
• baseline – zarovnání účaří textu

Nejčastější kombinace – vycentrování prvku vodorovně i svisle:

.obaleni {
  display: flex;
  justify-content: center;
  align-items: center;
}

Vlastnosti flex položek

flex-grow

Jak moc má položka dorůst, pokud je ve kontejneru volné místo. Hodnota 1 znamená, že položka využije volný prostor. Pokud mají všechny položky flex-grow: 1, prostor se rozdělí rovnoměrně:

.nav a {
  flex-grow: 1;  /* každý odkaz bude stejně široký */
}

flex-shrink

Jak moc se má položka zmenšit, pokud místo nestačí. Výchozí hodnota je 1 (může se zmenšit).

flex-basis

Výchozí velikost položky před distribucí volného prostoru. Podobné jako width, ale specifické pro flexbox.

Zkrácený zápis flex

.polozka {
  flex: 1;           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 0 0 200px;   /* pevná šířka 200px, neroste ani neschází */
}

Mezery – gap

Vlastnost gap nastaví mezery mezi flex položkami. Je to moderní a čistší alternativa k používání marginu na položky:

.nav {
  display: flex;
  gap: 1rem;             /* stejná mezera vodorovně i svisle */
  gap: 0.5rem 1.5rem;    /* svislá mezera / vodorovná mezera */
}

Tip od Zdeňka

Zdeněk radí: Flexbox je mocný, ale neznamená to, že ho musíš použít na všechno. Pro jednoduchá rozvržení vedle sebe je skvělý. Pro složitější dvourozměrné mřížky (řádky i sloupce zároveň) je lepší CSS Grid. Pravidlo je jednoduché: flexbox pro jednu osu, grid pro dvě. Na tomto webu používám flexbox hlavně pro záhlaví a pro řazení tlačítek.