Určení typu prvku – vlastnost display

V části o XHTML jsem prvky rozlišoval na blokové a řádkové. Tato jejich charakteristika ve skutečnosti není pevně dána. Navíc existuje ještě několik dalších typů prvků. Rozhoduje o nich vlastnost display, jejíž hodnoty jsou následující:

inline

Vytvoří řádkový materiál, který je běžnou součástí řádku. Uplatňuje se v něm dělení řádků a veškeré další chování, na něž jste zvyklí od běžného obsahu řádků. Toto je výchozí hodnota vlastnosti display.

block

Vytvoří samostatný blok – obdélníkovou vlastnost, jež zabere veškerou dostupnou šířku (napředepíšete-li odpovídajícími vlastnotmi jinak) a bude umístěna pod předchozí blok.

inline-block

Obsah řádkového bloku je formátován jako u normálního bloku, ale výsledný blok je pak zařazen do řádku jako velké písmeno. Takto se chovají například vkládané obrázky (prvek <img>).

list-item

Položka seznamu de facyo vytvoří dva bloky – jeden pro odrážku či pořadové číslo, druhý pro vlastní obsah položky.

none

Prvek nebude vůbec zobrazen. Zbytek stránky se chová, jako by vůbec neexistoval. Použijete-li display: none, zmizí společně s prvkem i veškerý jeho obsah, všichni jeho potomci (bez ohledu na to, jakou hodnotu má jejich vlastnost display).

flex

Vytvoří pružný blok (flexbox), ve kterém lze snadno řídit rozmístění prvků podle jedné osy – buď vodorovně, nebo svisle. Je to velmi praktické pro různá menu, záhlaví a zápatí stránek a podobně. Podrobnosti viz flexbox.

grid

Vytvoří dvourozměrnou mřížku, do které lze následně umisťovat prvky. Můžete její položky roztahovat přes více sloupců a/nebo řádků. Poskytuje velmi silný nástroj jak pro celkové rozložení základních částí stránky, tak pro uspořádání jejích dílčích částí. Více se dočtete na stránce Mřížka čili grid.

run-in

Představuje poměrně komplikované chování, někdy blokové, jindy řádkové. Pokud se za ním nachází normální blok (který není plovoucí či absolutně umístěn), stane se run-in prvek řádkovým materiálem na jeho začátku. V opačném případě vytvoří svůj vlastní blok.

tabulkové hodnoty

Deset dalších hodnot je určeno pro různé součásti tabulek (např. table, table-cell či table-column). Upřímně řečeno není radno je modifikovat, tabulky zkrátka nechte svému vlastnímu životu.

Použití

Některé hodnoty, jako inline, block nebo none jsou s námi už od počátků CSS. Novější přírůstky, zejména flex a grid otevřely zajímavé možnosti pro formátování obsahu a jejich podpora je už natolik široká, že se nemusíte bát používat je i na produkčních webech.

none umožňuje skrýt určitou část stránky. Například je obvyklé při tisku stránek odstranit menu a další navigační prvky a ponechat jen vlastní obsah. Podívejte se například na tiskový náhled této stránky. Zmizelo z něj menu i horní lišta, protože pro tisk má jejich vlastnost display hodnotu none.

V kombinaci s pseudotřídou hover lze hrátkami s display zajistit chování napodobující JavaScript. Například Eric Meyer títmo způsobem vytvořil dynamicky se zobrazující popisky: Část odkazu v menu (vyznačenou pomocí <span>) skryl použitím display: none. Až když na dotyčnou položku najedete myší, změní se display na block a text popisky bude dočasně zobrazen.

Menu vůbec představují oblast, kde speciální nastavení vlastnosti display často najde své uplatnění – viz třeba tento příklad.