Shrnutí

V této lekci jste rozvrhli horní část domovské stránky útulku a naučili jste se, že:

• Každá hodnota vlastnosti display má svou třídu: block, inline-block, inline, flex, grid. hidden je display: none: prvek se nezobrazí a nezabírá žádné místo.
• flex vytvoří flex kontejner. flex-row (výchozí) a flex-col určují směr jeho hlavní osy.
• gap-* nastavuje mezery mezi flex položkami a buňkami mřížky, s čísly ze škály mezer; gap-x-* a gap-y-* je nastaví zvlášť.
• justify-* rozkládá položky podél hlavní osy (justify-content): justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly.
• items-* je umisťuje na příčné ose (align-items): items-stretch (výchozí), items-start, items-center, items-end, items-baseline.
• flex-wrap přesune položky, které se nevejdou, na další řádek. grow a flex-1 roztáhnou položku do volného místa a shrink-0 jí nedovolí zúžit se.
• grid s grid-cols-* vytvoří mřížku ze stejně širokých sloupců (repeat(2, minmax(0, 1fr))). col-span-*, col-span-full a row-span-* roztáhnou položku přes víc buněk.
• Položky vycentrujete v obou směrech pomocí flex items-center justify-center. Svisle to jde jen tehdy, když je kontejner vyšší než jeho obsah, například díky min-h-96. Jediné dítě můžete vycentrovat i pomocí grid place-items-center.
• relative, absolute, fixed a sticky nastavují position a top-*, right-*, bottom-*, left-* a inset-* posuny. Posuny absolutního prvku se měří od nejbližšího předka s pozicí, obvykle od toho, který má relative.
• sticky top-0 udrží záhlaví nahoře v okně a z-* rozhoduje, který prvek je navrchu.
• Stejně jako v dřívějších lekcích: když dvě třídy nastavují stejnou vlastnost, o tom, která vyhraje, nerozhoduje jejich pořadí v atributu class, takže třídu nahraďte, místo abyste přidali druhou.

Vaše stránka má teď rozložení, ale na návštěvníka zatím nereaguje. V další lekci, Hover, focus a další stavy, zařídíte, aby se její tlačítka a odkazy měnily, když na ně najedete myší nebo na ně kliknete.

Než budete pokračovat, ještě krátké cvičení. Dole na stránku jsme přidali zápatí se třemi sloupci informací a s řádkem, ve kterém je copyright a odkaz zpět nahoru. Zatím je v něm všechno pod sebou.