Klikněte na tlačítko 🔍 Inspektor v horní liště a poté klikněte na libovolný element v okně živého náhledu pro zobrazení jeho Box Modelu (margin, border, padding, rozměry) a klíčových stylů.
flex-direction
row (výchozí) | column | row-reverse | column-reverse
justify-content
Zarovnání podél hlavní osy: flex-start | center | flex-end | space-between | space-around | space-evenly
align-items
Zarovnání na vedlejší ose: stretch (výchozí) | center | flex-start | flex-end | baseline
gap
Mezera mezi položkami: gap: 16px; nebo gap: 12px 24px; (řádky sloupce)
flex: 1;
Zkratka pro flex-grow: 1; flex-shrink: 1; flex-basis: 0%; (stejnoměrné roztažení).
margin-top: auto;
Ve sloupci (column) přilepí tlačítko nebo patičku až k úplnému spodnímu okraji karty!
grid-template-columns
repeat(3, 1fr) (3 stejné sloupce) | 250px 1fr 200px
Responzivní mřížka bez media queries
repeat(auto-fit, minmax(220px, 1fr))
grid-column
1 / 3 (přes 2 sloupce) | 1 / -1 (přes celou šířku)
grid-template-areas
"header header" "sidebar main" "footer footer"
Inline styl: style="..."
Váha: 1-0-0-0 (nejvyšší přednost)
ID selektor: #header
Váha: 0-1-0-0
Třída, Atribut, Pseudotřída: .btn, :hover
Váha: 0-0-1-0
Tag, Pseudoprvek: div, p, ::before
Váha: 0-0-0-1
box-sizing: border-box;
Šířka (width) a výška (height) zahrnují i padding a border. Prvek se neroztahuje přes zadanou šířku.
Centrování bloku
width: 480px; margin: 0 auto; (vycentruje blok vodorovně v rodiči).
rem
Relativní k písmu kořene html (1rem = obvykle 16px). Doporučeno pro text i layout.
vw / vh
1 % z celkové šířky / výšky viditelné obrazovky (viewportu).
clamp(min, preferred, max)
Fluidní hodnota omezená mantinely: clamp(1rem, 3vw, 2.5rem).