Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

Lekce 10 - Pozicování v HTML - Flexbox, float a grid

V předešlém cvičení, Řešené úlohy k 6.-9. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Naposled jsme v HTML/CSS tutoriálu skončili vložením tagu <article>, ve kterém se nacházela hlavička (<header>) a sekce s článkem (<section>). Naše stránka vypadá asi takto:

Moje první webová stránka
index.html

Elementy <header> a <section> jsou blokové (jako třeba odstavce). Jejich výchozí chování je, že se roztáhnou přes celou šířku elementu, ve kterém jsou vložené (tedy přes celý <article>) a poskládají se pod sebe.

Pozicování elementů je v CSS obtížnější, než by se na první pohled mohlo zdát. Nebo tomu aspoň tak bylo v minulosti, když se pozicovalo v podstatě pomocí hacků. Tehdy se hodně používala vlastnost float, která měnila elementy na tzv. plovoucí elementy a umožňovala je tak řadit vedle sebe, nikoliv pod sebou. Dnešní praxe ovšem velí používat k těmto účelům především mřížku (grid) a flexbox. Naučíme se tedy pracovat s těmito moderními technologiemi.

Flexbox

Flexbox (Flexible Box) označuje jednorozměrný layoutový model, který umožňuje skládat položky nějakého elementu za sebe. Jednorozměrný zde znamená, že se řeší rozložení pouze v jednom směru - buď do řádku, nebo do sloupce.

Flexbox nám kromě směru skládání položek umožňuje navíc snadno nastavit, v jakém pořadí se mají položky skládat, kolik místa mají jednotlivé položky zabírat, jaké mají mít mezi sebou mezery a mnohé další. Flexbox jako první využijeme na elementu <body>, a to právě kvůli možnosti nastavení místa, které mohou jeho položky zabírat.

Elementu <body> nastavíme zobrazení (display) flex a přidáme také specifikaci, v jakém směru se má flexbox zobrazit - zda ve sloupcích (flex-direction: column;) nebo řádcích (flex-direction: row;), případně v jakém pořadí:

body {
    font: 14px "Poppins";
    color: #414042;
    background: #F9F9F9;
    display: flex;
    flex-direction: column;
}

S elementy uvnitř <body> (v návodech často naleznete termín flex-container, kterým se <body> po zápisu display: flex; stalo) nyní můžeme pracovat jako s položkami flex (flex-items). Naší zatím jedinou položkou je element <article>, pro který vytvoříme samostatný selektor a kterému připíšeme následující vlastnost:

article {
    flex: 1;
}

Pojďme si vlastnost flex: 1; trochu rozebrat. Jedná se o sloučení tří flexboxových vlastností, které velice často mají právě tuto podobu:

  • flex-grow : 1; ➜ Element bude růst proporcionálně spolu s velikostí okna.
  • flex-shrink : 1; ➜ Element se smrskne proporcionálně v závislosti na velikost okna.
  • flex-basis : 0; ➜ Element jako takový nemá počáteční hodnotu, a zabere tedy na obrazovce tolik místa, kolik ho bude dostupného. Například pokud jsou v kontejneru tři položky, pak každá zabere 33 %.

Díky tomuto nastavení bude článek <article> vždy zabírat na výšku maximální dostupné místo elementu <body>, které není zabráno jinými elementy.

Flexibilní zobrazení budeme nastavovat i dalším elementům na stránce, například headeru, navigaci, logu a footeru. K těm se však dostaneme později v kurzu.

Výsledek bude vypadat takto, byť zatím není plná funkcionalita flexboxu patrná, protože <article> je v <body> jediným elementem:

Moje první webová stránka
index.html

Plovoucí obsah (float)

Následující použití vlastnosti float je zde zmíněno pro informaci. Můžete se s ním setkat ve starších kódech, ale nedoporučujeme takový zápis provádět, nebo pouze ve specifických případech.

Vlastnost float se dříve používala k pozicování v CSS zcela běžně. Plovoucí elementy se řadily vedle sebe a byly neplovoucím obsahem obtékány.

Stačilo napsat šířku elementu a určit, zda má být element vlevo či vpravo, a bylo zdánlivě hotovo (zápis kódu nemusíte provádět - za chvíli použijeme modernější způsob):

article header {
    height: 100px;
    width: 250px;
    float: left;
}
article section {
    width: 710px;
    float: left;
    background: white;
}

Výsledek:

Moje první webová stránka
index.html

Jaké to však má problémy?

  • Musíme zadávat přesnou šířku. Dnes již neplatí, že se webové stránky dělají široké 960 pixelů. Poptávka je po responzivním designu, který se přizpůsobí všem zařízením, na kterých by si uživatel mohl chtít web zobrazit. Proto je velice pracné pracovat s absolutními hodnotami. Jakmile bychom změnili velikost okna, design by se nejspíš rozsypal.
  • Jakmile s floatem nechceme pracovat, nesmíme zapomenout jej ukončit pomocí vlastnosti clear, která nabývá hodnot left, right nebo both. Na takový “čistič” nesmíme zapomenout.

K čemu se tedy dnes používá float?

Určitě nedoporučujeme používat float k pozicování elementů. Co však můžeme využít, je takzvané obtékání - například pokud chceme do textu umístit obrázek a chceme, aby jej text nějakým způsobem obklopoval (tak, jako to známe například z Wordu a jiných textových editorů).

Zkusme si to s naším avatarem (později tuto část kódu smažeme a nahradíme float technologií grid).

Vložme si obrázek za první odstavec v sekci a přidejme mu třídu vlevo:

<section>
    <p>
        Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.
    </p>

    <img src="obrazky/avatar.jpg" alt="Programátor HoBi" class="vlevo" />

    <p>
        Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.
        Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.
    </p>
    ...
</section>

V CSS nyní vytvoříme selektor pro tuto třídu vlevo, do kterého vložíme vlastnost float s hodnotou left (obrázek bude textem obtékán zleva), a také nějaký padding, aby se text nenalepil přímo na fotografii:

.vlevo {
    float: left;
    padding: 10px;
}

O vlastnosti padding zajišťující odsazení obsahu si více povíme dále v kurzu.

Výsledkem tedy je, že je fotka obtékána textem, což je nejlépe vidět při zmenšení prohlížeče. Do našeho celkového designu se to však příliš nehodí, nicméně toto je i dnes validní použití vlastnosti float:

Moje první webová stránka
index.html

Vrátíme nyní obrázek v index.html na své původní místo (můžeme použít zkratku Ctrl + z), smažeme ve styl.css třídu vlevo a vše, co jsme si přidali v této kapitole o plovoucím obsahu. Budeme pokračovat ve tvorbě našich webových stránek.

Proč vlastnost float nepoužívat při tvorbě layoutu jsme si již vysvětlili. Jak si tedy poradit s pozicováním?

Mřížka (grid)

Výše jsme si uvedli, že flexbox se zabývá rozložením v jednom rozměru – buď se orientuje na řádek, nebo na sloupec. Grid layout je dvourozměrný, což znamená, že řeší rozložení do sloupců a řádků najednou.

V minulosti se layout dělal často pomocí tabulek. To už je dnes velice zastaralá praktika, která se opravdu nepoužívá. Místo toho se využívají právě flexbox a grid, neboli mřížka. Ačkoliv bychom v našem projektu mohli používat pouze jednu nebo druhou technologii, ukážeme si práci s oběma. I v praxi se grid a flexbox velice často prolínají, protože každý se vyplatí používat v jiných situacích. :-)

Nejprve si do elementu <div>, který je prvním potomkem našeho elementu <article>, vložíme novou třídu a nazveme si ji domu-article:

<body>
    <article>
        <div id="centrovac" class="domu-article">
            ...
        </div>
    </article>
</body>

Podobné rozložení s elementy <article> a <div> budeme mít v budoucnu i na jiných stránkách. Na nich však grid nebudeme používat, proto tento element <div> odlišujeme třídou domu-article.

Nyní s touto třídou začneme pracovat v CSS. Postup bude podobný jako u flexboxu. Nastavíme vlastnost zobrazení na grid a dále specifikujeme, kolik sloupců/řádků mřížka zabere pomocí vlastností grid-template-columns a grid-template-rows, respektive určíme, jak velkou část obrazovky budou zabírat.

My budeme chtít náš článek rozdělit na mřížku se dvěma sloupci a dvěma řádky. Ukažme si to nejprve na jednoduchém obrázku:

Mřížka na HoBiho webu

V prvním sloupci a prvním řádku bude umístěn element <header> s nadpisem. Pod nadpisem, tedy v prvním sloupci a na druhém řádku, budeme mít sekci s textem <section>. No a obrázek bude zabírat celý druhý sloupec, tedy oba řádky.

Co se rozměru sloupců a řádků týče:

  • Oběma sloupcům nastavíme šířku na auto, aby se vždy přizpůsobila obsahu sloupce
  • Prvnímu řádku nastavíme výšku na 100px podle výšky elementu <header>
  • Druhému řádku pak nastavíme výšku na maximální možnou, tedy max-content

Takto bude vypadat kód selektoru .domu-article:

.domu-article {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 100px max-content;
}

Kdybychom položek na řádku či ve sloupci chtěli víc, zapsali bychom velikosti podle požadovaného počtu.

Umístění položky v mřížce

Grid ve výchozím stavu rozmisťuje položky po řádcích v takovém pořadí, v jakém jsou zapsány v HTML kódu. To znamená, že nejprve se snaží zaplnit první řádek, poté druhý, třetí atd. Proto, kdybychom si teď naši stránku zobrazili, bychom viděli text ve druhém sloupci a obrázek pod nadpisem, což nechceme. V HTML jsou elementy totiž zapsány v pořadí nadpis, text a obrázek.

Musíme tedy nastavit, aby se obrázek zobrazoval přes celý druhý sloupec. Zbylé elementy se pak rozmístí do správných buněk automaticky. Změníme náš aktuální selektor img tak, aby vybíral pouze obrázky v elementu se třídou .domu-article, a přidáme mu nové vlastnosti:

.domu-article img {
    width: 300px;
    grid-row-start: 1;
    grid-row-end: span 2;
    grid-column: 2;
    filter: grayscale(1);
}

Obrázku necháváme nastavenou pevnou šířku 300 pixelů. Pro nastavení pozice elementu ve mřížce používáme tyto vlastnosti:

  • grid-row-start - určuje, na které pozici se element v mřížce na řádce začne zobrazovat. Číslování vychází z hranic mřížky (tzv. grid-lines, můžeme si je představit jako jednotlivé čáry, které v celku vytvářejí mřížku a které se číslují od 1) a funguje zleva doprava.
  • grid-row-end - stanoví koncovou pozici (hranici) daného elementu (v našem případě obrázku) na řádce. V kombinaci s hodnotou span určuje, po kolika pozicích (hranicích) řádků od počáteční pozice element končí.
  • grid-column - jedná se o zkratku za vlastnosti grid-column-start a grid-column-end, které určují pozice v sloupci a které se chovají obdobně jako výše zmíněné vlastnosti. Pouze jedna zadaná hodnota je chápána jako pořadí sloupce. V případě, že chceme zadat hodnoty hranic sloupců, tak je oddělíme lomítkem /.

Obrázku jsme zároveň přidali černobílý filtr pomocí vlastnosti filter: greyscale(1);, kde grayscale může nabývat číselné hodnoty 0, 0.1, 0.2, ... až 1 podle toho, na kolik chceme obrázek ztmavit. Hodnotu vlastnosti grayscale lze uvádět také v procentech. Můžeme si vyzkoušet zadat např. hodnotu 0.5 (nebo 50%), abychom věděli, že i takové možnosti stylování CSS nabízí.

Výsledkem je umístění obrázku vedle elementu <header> a <section>:

Moje první webová stránka
index.html

Práce s grid systémem od CSS je o něco pokročilejší technika, která možná na první pohled vypadá náročněji než třeba zmiňovaný zastaralý float. Ve výsledku však naši práci velmi usnadní a zefektivní. Určitě doporučujeme prostudovat si článek Grid systém od CSS, který se tomuto layoutu věnuje detailněji.

V příští lekci, Rámeček, stín a boxmodel v CSS, si vysvětlíme tzv. boxmodel a dokončíme oblast s článkem.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 5606x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 6.-9. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Rámeček, stín a boxmodel v CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
538 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (202)

Avatar
Tomáš Pup
Člen
Avatar
Tomáš Pup:23. srpna 10:36

Hledal jsem proč nemám obrázek vpravo, pročetl komentáře zpětně, zkontroloval CSS sedí se vzorem, odebral obrázek ze section, <p> u obrázku jsem ani neodebíral ten jsem tam neměl, a i přesto obrázek není vpravo.Takže bude někde chyba v HTML. Proč když si chci zkontrolovat cvičení, nemám zde i HTML tabulku, abych věděl? Nebylo by opravdu lepší natočit k lekcím videa? Zbytečně se člověk zasekne na několik hodin u jedné lekce a nakonec stejně nic nevyřeší.

 
Odpovědět
23. srpna 10:36
Avatar
Tomáš Pup
Člen
Avatar
Odpovídá na Tomáš Pup
Tomáš Pup:1. září 21:24

Nakonec jsem to stejně udělal úplně jinak, i když jsem dal obrázek podle tutoriálu jak má být a v css jej nastavil stejně to nefungovalo. Podle HTML má být vložen obrázek pod ukončení section co jsem pochopil, ale stále mi jej nezmenší a ani nepřesune doprava. Tak jsem to nakonec upravil jen v HTML a obrázek je vpravo, ale není tak vysoko jak je napsané O Mně, ale těsně pod ním. Aspoň tak.

 
Odpovědět
1. září 21:24
Avatar
Alena Melicharová:7. září 20:25

taky mi to fungovalo podle návodu, ale stejně jsem to raději kontrolovala s vyřešeným staženým souborem, abych měla jistotu, že mi to funguje správně.
Jen si nejsem jistá, jestli selektroy v CSS můžou být v nějakým určitým pořadí, nebo nahodile, budu muset vyzkoušet.

Odpovědět
7. září 20:25
"Svět patří těm, co se nepo*****" (Charles Bukowski)
Avatar
Tomáš Nitsche:11. září 9:46

Mě to podle návodu funguje akorát jsem musel v CSS promazat některé selektory, které byly z minulých lekcí zobrazeny jen pro "informaci" a tak mi v tom dělaly nepořádek.

 
Odpovědět
11. září 9:46
Avatar
Pavel Kupcik
Člen
Avatar
Odpovídá na Alena Melicharová
Pavel Kupcik:19. září 12:17

Taky to kontroluji a kolikrát mě trochu vytočí, jak to mám složitě a oni to mají na jednom řádku vyřešené :) Ale beru si z toho ponaučení.

 
Odpovědět
19. září 12:17
Avatar
Petra Nejezchlebova:26. září 8:40

Trošku jsem se v tom ztrácela ale po stažení vzoru ok

 
Odpovědět
26. září 8:40
Avatar
Renáta Vyšatová:12. října 0:19

Nejdřív se mi výsledek ukazoval špatně, obrázek byl hned pod nadpisem, ale když jsem si to prostudovala podruhé, tak jsem zjistila, že v CSS bych měla mít vlastně dvakrát selektor .domu-article (jednou jako určení pomyslné "tabulky", podruhé již určení polohy obrázku). Tolik se mi líbí, když na něco přijdu a vidím očekávaný výsledek 😊

 
Odpovědět
12. října 0:19
Avatar
Lucie Hejnalová:27. října 11:23

...obrázek pod nadpisem, což nechceme. 😁 Poučení pro příště. Nejprve si to celé přečti! Za mě dobrý 😉

 
Odpovědět
27. října 11:23
Avatar
Karolína Švarcová:4. listopadu 19:15

Tak první lekce, u které jsem si musela stáhnout kód, abych zjistila, co tam je špatně, protože mi to nefungovalo. Hledala jsem chybu v nastavených sekcích (domu-article atd.), což byla také chyba. Zjistila jsem, že mám chybu v CSS u body, dělalo mi neplechu nastavení fontu, jelikož jsem tam měla font-family a font-size, přičemž jsem si v předloze všimla, že byly tyhle dvě položky změněny na jeden řádek, a to "font".

Asi jsem jen něco přehlédla ve změnách, bojím se totiž vždy něco smazat. 😀

Editováno 4. listopadu 19:17
 
Odpovědět
4. listopadu 19:15
Avatar
Jan Trnka
Člen
Avatar
Jan Trnka:10. listopadu 21:14

Tady jsem to zvládl docela dobře a také kontroluji css ty staré věci které tam zůstávají.

 
Odpovědět
10. listopadu 21:14
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 212. Zobrazit vše