📖
Teorie
Flexbox (CSS Flexible Box Layout) je model zaměřený na jednorozměrné rozvržení (řádky nebo sloupce). Klíčové vlastnosti: display:flex, flex-direction, justify-content, align-items, flex-wrap, order, flex (grow/shrink/basis). Používejte pro řazení položek v řádku/koloně a pro vycentrování.
🎯
Tahák
- 1display:flex
- 2justify-content: center/space-between
- 3align-items: center
- 4flex: 1 0 auto
❓
Typické otázky u maturity
- 1Rozdíl mezi align-items a align-content?
- 2Kdy použít flex-wrap?
🏷️
Klíčová slova
flexjustify-contentalign-itemsflex-basis
⚡
Praktická část
Zadání:
Vytvoř horizontální navbar s logem vlevo a položkami vpravo (flex).
Kroky:
- 1Header display:flex
- 2logo order 0, menu order 1
- 3justify-content: space-between
Kód:
navbar.css
.header{display:flex;align-items:center;justify-content:space-between;padding:1rem}