CSS Box Model
& Flexbox

CSS Box Model

Každý HTML prvek je v CSS obdélníková krabice — "box". Box model popisuje, z čeho se skládají rozměry a prostor kolem každého prvku. Čtyři vrstvy zevnitř ven:

• content — samotný obsah (text, obrázek), definovaný přes width a height
• padding — vnitřní odsazení mezi obsahem a okrajem; má barvu pozadí prvku
• border — ohraničení prvku; má šířku, styl a barvu
• margin — vnější odsazení od okolních prvků; je vždy průhledný

/* Základní box vlastnosti */
.box {
  width: 200px;          /* šířka obsahu */
  height: 100px;         /* výška obsahu */
  padding: 16px;         /* vnitřní mezera (všechny strany) */
  padding: 8px 16px;     /* vertikální | horizontální */
  padding: 4px 8px 12px 16px; /* top right bottom left */
  border: 2px solid #333;
  margin: 24px auto;     /* auto horizontálně = centrování */
}Kopírovat

box-sizing: border-box

Výchozí chování (content-box) přidává padding a border k definované šířce. To je neintuitívní. Proto se v každém moderním projektu nastavuje globální reset:

/* ✅ VŽDY nastavte na začátku CSS */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Výsledek:
   width: 200px; padding: 20px; border: 2px;
   
   content-box: skutečná šířka = 200 + 40 + 4 = 244px ❌
   border-box:  skutečná šířka = 200px               ✅
   (padding a border jsou zahrnuty do 200px)
*/Kopírovat

Vlastnost display

Vlastnost display určuje, jak se prvek chová v toku dokumentu. Základní hodnoty:

/* Přepnutí block na inline a naopak */
img { display: block; margin: 0 auto; } /* centrování obrázku */
li  { display: inline-block; margin: 0 8px; } /* horizontální menu */

/* visibility: hidden vs display: none */
.skryty  { display: none; }      /* odstraní z layoutu */
.neviditelny { visibility: hidden; } /* zachová místo */Kopírovat

Flexbox — jednorozměrný layout

Flexbox řeší rozmístění prvků podél jedné osy (řádek nebo sloupec). Stačí nastavit display: flex na rodiči — children se automaticky stávají "flex items".

Hlavní osa a křížová osa

• Hlavní osa (main axis) — směr určený flex-direction (výchozí: horizontálně zleva)
• Křížová osa (cross axis) — kolmý směr k hlavní ose

.container {
  display: flex;
  flex-direction: row;        /* row | row-reverse | column | column-reverse */
  justify-content: flex-start; /* zarovnání na hlavní ose */
  align-items: stretch;        /* zarovnání na křížové ose */
  flex-wrap: nowrap;           /* zalamování */
  gap: 16px;                   /* mezery mezi items */
}Kopírovat

Vlastnosti flex items

Kromě vlastností kontejneru máme vlastnosti pro jednotlivé children — flex items:

.item {
  /* flex-grow: jak moc item roste (0 = neroste) */
  flex-grow: 1;   /* vezme zbývající místo */

  /* flex-shrink: jak moc se smršťuje (1 = výchozí) */
  flex-shrink: 0; /* nikdy se nezmenší */

  /* flex-basis: výchozí velikost před distribucí prostoru */
  flex-basis: 200px;

  /* Shorthand: grow shrink basis */
  flex: 1 1 auto;   /* = flex: 1 */
  flex: 0 0 200px;  /* fixní šířka 200px */

  /* Individuální zarovnání (přepisuje align-items) */
  align-self: center;

  /* Pořadí (výchozí: 0) */
  order: -1; /* tato položka bude první */
}Kopírovat

Praktický příklad: Navbar

Praktický příklad: Karta produktu

Praktické cvičení

Napište CSS pro responzivní layout stránky: nahoře navbar (logo vlevo, menu uprostřed, tlačítko vpravo), pod ním třísloupcový grid karet. Použijte box-sizing: border-box, Flexbox pro navbar i karty.

Taháček — rychlá reference

Box Model

/* Reset (vždy nastavte!) */
*, *::before, *::after { box-sizing: border-box; }

/* Margin shorthandy */
margin: 16px;           /* všechny strany */
margin: 8px 16px;       /* top/bottom  left/right */
margin: 4px 8px 12px 16px; /* top right bottom left */
margin: 0 auto;         /* horizontální centrování bloku */Kopírovat

Flexbox — kontejner

.container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | flex-end
                 | space-between | space-around | space-evenly;
  align-items: stretch | center | flex-start | flex-end | baseline;
  align-content: /* víceřádkové zarovnání (s flex-wrap) */
  flex-wrap: nowrap | wrap | wrap-reverse;
  gap: 16px;          /* mezery mezi items */
  gap: 8px 16px;      /* row-gap column-gap */
}Kopírovat

Flexbox — items

.item {
  flex: 1;          /* = flex-grow: 1 shrink: 1 basis: auto */
  flex: 0 0 200px;  /* fixní šířka */
  align-self: center; /* přepíše align-items */
  order: -1;        /* změní pořadí */
}Kopírovat

Zlatá pravidla

• ✅ Vždy box-sizing: border-box jako globální reset
• ✅ margin: 0 auto pro centrování bloku (musí mít šířku)
• ✅ flex: 1 pro "vyplň zbývající prostor"
• ✅ gap místo margin pro mezery ve flex/grid
• ✅ flex-direction: column pro vertikální layouty
• ❌ Nepoužívat float pro layouty (zastaralé)
• ❌ Zapomínat na flex-wrap: wrap u responzivních layoutů