Zobrazování

display - inline

• nelze nastavit výška či šířka
• zabírají místo, které je jim dáno

display - block

• lze nastavit výška či šířka
• vždy začínají na dalším řádku a zabírají celou šířku

display - inline-block

• lze nastavit výška či šířka
• zabírají místo na řádku

display - none

• vůbec se nezobrazí
• nezabírá místo

display - další

https://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=list-item

Flex

Úvod

• flex = moderní způsob tvorby rozložení
• velmi důležité pro moderní weby
• podporované všude
• jednoduchá responzivita

Kontejner

• = obal okolo prvků
• = container
• určuje jak se prvky budou zarovnávat
• prvky se vždy zobrazují jako blok

Předměty

• = jednotlivý prvek
• = dítě, child, item, prvek

Hlavní osa

Sekundární osa

Zarovnání na hlavní ose

justify-content

Zarovnání na sekundární ose

align-items

Zalomení

flex-wrap

Prohození os

flex-direction

Mezery

Vlastnosti předmětů

Pořadí

Zarovnání na sekundární ose

Růst / roztažení

Zmenšení / stažení

flex-shrink

Základní velikost