Tutoriál

Display

Vlastnost display v CSS určuje, jak se prvek zobrazuje na webové stránce.

Hodnoty

inline: Prvek je zobrazen jako inline prvek (např. <span>). Nemá vliv na výšku a šířku.
block: Prvek je zobrazen jako blokový prvek (např. <p>). Začíná na novém řádku a zabírá celou šířku.
contents: Kontejner zmizí a jeho potomci se stávají potomky elementu, který je o úroveň výše v DOM.
flex: Prvek je zobrazen jako blokový flex kontejner.
grid: Prvek je zobrazen jako blokový grid kontejner.
none: Prvek je úplně odstraněn ze stránky.

Řádkový prvek (display: inline)

Příklad

HTML
    <span style="background-color: lightgreen;">Řádkový prvek</span>

Blokový prvek (display: block)

Příklad

HTML
    <div style="background-color: lightblue; width: 100px; height: 50px;">Blokový prvek</div>

Položka seznamu (display: list-item)

Příklad

HTML
    <ul>
        <li>První položka</li>
        <li>Druhá položka</li>
    </ul>

Skrytý prvek (display: none)

Příklad

HTML
    <div style="display: none;">Tento prvek je skrytý</div>

Flex (display: flex)

Příklad

HTML
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>Prvek 1</div>
        <div>Prvek 2</div>
        <div>Prvek 3</div>
    </div>

justify-content

Tato vlastnost je velmi užitečná pro vytváření flexibilních rozvržení na webových stránkách.

Určuje, jak se prostor rozděluje mezi a kolem prvků na hlavní ose flexibilního kontejneru.

př.: center, space-between, space-around, flex-start

align-items

Tato vlastnost je užitečná pro vytváření flexibilních rozvržení na webových stránkách.

Určuje výchozí zarovnání prvků uvnitř flexboxu nebo grid kontejneru.

př.: center, stretch, flex-start, baseline