MENU

Display – zobrazování a chování prvků

Vlastnost, která je klíčová pro chování a zobrazování všech HTML prvkům. Určuje, jak se chovají vůči ostatním prvků, respektive, jakou pozici mají vůči ostatním prvkům.

Podpora prohlížečů je u každého druhu jiná | není dědičná

Způsob zápisu

Ukázka zápisu prvku do blokového elementu:

selektor {
display: block;
}

Druhy display

display: block

Na šířku se snaží vyplnit celý prostor rodičovské HTML značky. Zastaví se až v okamžiku, kdy narazí na hranici většinou DIVu. Na výšku se přizpůsobuje velikosti obsahu. Pokud potřebujete jeho šířku zmenšit, musíte mu nastavit width, případně max-width, eventuálně min-width. Jestliže byste chtěli dva blokové elementy dát vedle sebe, můžete je obtékat pomocí float.

Je defaultně nastaven u: <div>, <p>, <h1> a ostatních nadpisů, <ul>, <ol>, <iframe>, <menu>.

Podpora na prohlížečích je stoprocentní.

display: none

Slouží ke schování HTML elementu, který po načtení stránky může být skrytý a zobrazit až v určitý okamžik (třeba za pomoci JavaSriptu). Display: none se chová tak, že nezabírá vůbec žádné rozměry, a tudíž pochopitelně není ani vidět.

Defaultně není nastaven u žádného HTML prvku.

Podpora na prohlížečích je stoprocentní.

display: inline

Značí se také jako řádkový. Jeho šířka se vypočítává z obsahu, v drtivé většině z písmen. 

Je defaultně nastaven u: <a>, <span>.

Podpora na prohlížečích je stoprocentní.

display: table

Defaultně nastaven jen u jediné značky, a to <table>. Přesto se dá použít u jakékoli jiné HTML značky. Proč to dělat? Protože display table se standardně chová tak, že svou šířku vypočítává z obsahu uvnitř. To je rozdíl oproti display block, který šířkou vyplňuje celý rodičovský HTML prvek (např. DIV). Pokud např. u vodorovného menu nastavíte <ul> display: table, tak si sám vypočítá svou šířku podle obsahu, tj. podle šířek tlačítek. Pokud okraje nastavíte margin auto, zarovnáte celý blok na střed, a přitom se bude jeho rozměr počítat z obsahu.

Tabulky mají ještě další druhy display, jako jsou table-row pro <tr>, table-cell pro <td>, table-caption pro <caption>, table-column pro <col>, table-header-group pro <thead>, table-row-group pro <tbody> a table-footer-group pro <tfoot>. Tyto druhy se ale v praxi příliš často nepoužívají.

Podpora na prohlížečích je stoprocentní.

display: flex

Umí blokové prvky umisťovat vedle sebe do sloupců a je alternativou vlastnosti float. Jedná se sice o relativně nový druh display, ale v dnešní době již velice dobře podporovaný nejčastěji používanými prohlížeči. Dnes už prakticky není důvod nepoužívat ho v praxi.

V praxi se používá tak, že např. DIVem obalíte prvky, které mají být ve sloupcích. Praktická ukázka:

...
<div style="display: flex">
<div class="prvni-sloupec">
...
</div>
<div class="druhy-sloupec">
...
</div>
</div>
...

V porovnání se sloupci pomocí float, má tu výhodu, že nemusíte řešit konec obtékání. Také se nemusíte bát, že by se prvky nevešly do sloupců a rozpadl by se layout (místo vedle sebe by se zobrazili pod sebou).

Běžné chování bloků uvnitř display: flex je takové, že všechny bloky se na šířku přizpůsobí tak, aby všechny zabíraly stejný poměr, pokud jejich obsah je větší, než je možný prostor. V případě menšího obsahu (u dvou sloupců menšího než 50% šířky), zabírá blok jen tolik, kolik je nezbytně nutné, což platí i pro DIV, který by se takto v jiném režimu nechoval. To se dá samozřejmě změnit, kdy každému bloku určíte jinou šířku.

Může se stát situace, kdy potřebujete, aby se prvky uvnitř zalamovaly na nový řádek, pokud se nevejdou vedle sebe. Praktickým příkladem mohou být náhledy článků na velkých monitorech ve třech sloupcích, ale současně ve více řádcích (i pod sebou). K tomu slouží flex-wrap: wrap

...
<div style="display: flex; flex-wrap: wrap">
<div class="prvni-sloupec-prvni-radek" style="width:50%">
...
</div>
<div class="druhy-sloupec-prvni-radek" style="width:50%">
...
</div>
<div class="treti-sloupec-druhy-radek" style="width:50%">
...
</div>
</div>
...

Běžně se prvky uvnitř display flex zarovnávají zleva doprava, pokud jejich obsah není větší, než je možné. Běžně se to stává např. u tlačítek menu. Pokud chcete, aby se obsah (např. tlačítka menu) zobrazovala na středu stránky, stačí nastavit justify-content: center. Ukázka:

...
<ul style="display: flex; justify-content: center">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Graficky může dobře vypadat, pokud např. tlačítka menu zarovnáte zprava. I to display flex umí, viz příklad:

...
<ul style="display: flex; justify-content: flex-end">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

U responzivních designů, které se přizpůsobují i pro telefony se může stát situace, kdy HTML kód bude řadit prvky (třeba sloupce) v pořadí vhodném pro telefon, ale na počítačích se mají prvky zobrazovat v jiném pořadí. Např. pro telefon bude první menu, pak obsah se články a až poslední bude sloupec s novinkami. V tomto pořadí budou strukturované i DIVy. Ale kodér použije display flex a bude potřebovat řadit zleva doprava v jiném pořadí. I na to v CSS3 mysleli. Každému prvku můžete dát takové pořadí, jaké chcete. Ukázka:

...
<div style="display: flex">
<div style="order: 3">
...
</div>
<div style="order: 1">
...
</div>
<div style="order: 2">
...
</div>
</div>   

Při sloupcích se také běžně řeší výška sloupců. Standardní chování display: flex je takové, že výška všech prvků (většinou sloupců) je vždy stejná, což většina kodérů a designerů potřebuje. Ale ne vždy. Někdy potřebujete, aby se výška sloupce přizpůsobila velikosti obsahu. K tomu slouží align-items: baseline. Ukázka:

...
<div style="display: flex; align-items: baseline;">
<div> ... </div>
<div> ... </div>
</div>

K display: flex toho najdete ještě více, ale zde jsme uvedli ty nejužitečnější a nejpoužívanější. Všechny naleznete v angličtině zde: https://www.w3schools.com/css/css3_flexbox.asp.

display: inline-block

Velice zajímavé chování. Používá se většinou pro řádkové neboli inline prvky, kterým ale z nějakého důvodu chcete nastavit rozměry jako je width, height, margin, padding případně border. Může se jednat třeba o tlačítko vyrobené ze značky <a>.

Závěr

Existuje ještě celá řada další display, ale ty nejsou tak často používány jako ty zde zmíněné. Z důvodu přehlednosti je zde proto neuvádíme. Všechny si ale můžete najít na tomto linku:
https://www.w3schools.com/cssref/pr_class_display.asp 

Kam dál

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548