Ak chcete vytvárať úžasné a responzívne webové stránky, je potrebné, aby ste dobre rozumeli Flexbox a CSS Grid.
Ak píšete CSS akokoľvek dlho, je veľká šanca, že ste o týchto výrazoch aspoň počuli. Možno ste dokonca do určitej miery použili jeden alebo oba. Obe sú výkonné súčasti CSS s podobnými, ale jemne odlišnými prípadmi použitia.
Čo je Flexbox?
Flexbox je jednorozmerná metóda rozloženia CSS, ktorá existuje už nejaký čas. Flexbox si môžete predstaviť ako skupinu súvisiacich vlastností CSS, ktoré môžete použiť na zarovnanie prvkov HTML v kontajneri a spravovanie priestoru medzi nimi.
Pred Flexboxom si tento typ rozloženia vyžadoval frustrujúce a nepraktické používanie plaváka a vlastnosti polohy.
Ak sa obávate o podporu prehliadača pre Flexbox, nemusíte. Podľa caniuse.com, všetky moderné prehliadače podporujú Flexbox.
Základy Flexboxu
Zatiaľ čo Flexbox obsahuje mnoho vlastností CSS, základy sú celkom jednoduché. Používanie Flexboxu vždy začína deklarovaním nadradeného kontajnera ako flexibilného kontajnera pridaním
displej: flex na pravidlá jeho štýlu. Ak to urobíte, automaticky sa zo všetkých potomkov tohto prvku stanú flexibilné položky.Potom môžete ovládať rozloženie priestoru v flex-kontajneri pomocou vlastnosť ospravedlniť-obsah. Môžete ovládať zarovnanie flexibilných položiek s align-items nehnuteľnosť.
Tu je príklad kódu, ktorý používa Flexbox na rovnomerné rozloženie priestoru v kontajneri medzi jeho potomkami a zarovnanie všetkých do stredu kontajnera. Toto je HTML:
<trieda div="kontajner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Toto je CSS:
.kontajner {
displej: flex;
šírka: 100 %;
justify-content: space-around;
align-items: center;
orámovanie: 1px plná čierna;
výška: 200px;
}
.kontajner > div {
výška: 100px;
šírka: 100px;
farba pozadia: červená;
farba: biela;
veľkosť písma: 5rem;
text-align: center;
border-radius: 5px;
}
A tu je výstup:
Čo je mriežka CSS?
CSS Grid je systém rozloženia, ktorý dopĺňa Flexbox. Flexbox je výkonný, ale nie je veľmi vhodný pre určité typy rozložení. Pokúšať sa rozložiť štruktúru celej stránky pomocou Flexboxu skončí ako frustrujúca úloha zahŕňajúca škaredé, nesématické značenie a prešibané CSS.
CSS Grid nie je náhradou Flexboxu, ale skôr alternatívnym systémom pre niektoré situácie.
Podpora pre CSS Grid nie je taká rozsiahla ako pre Flexbox, ale Grid áno primerane dobre podporované v roku 2022.
Základy CSS Grid
Koncept Gridu je jednoduchý. Ako už názov napovedá, CSS Grid vám umožňuje rozdeliť priestor v nadradenom kontajneri na mriežku riadkov a stĺpcov s ľubovoľným počtom riadkov/stĺpcov, ktoré sa vám páčia. Potom určíte polohu podradených položiek odkazom na riadky rodičovskej mriežky.
Začnite pridávaním displej: mriežka do nadradeného kontajnera. Potom použite grid-template-rows a mriežka-šablóna-stĺpce vlastnosti na určenie riadkov a stĺpcov, na ktoré chcete rozdeliť mriežku. Potom môžete použiť mriežka-stĺpec a grid-row vlastnosti na podriadených prvkoch, aby ste im povedali, kde v mriežke majú byť. Pozrime sa na príklad mriežky, ktorý používa päťprvkové nastavenie z predchádzajúceho, ale v komplikovanejšom usporiadaní.
Tu je HTML:
<trieda div="kontajner">
<div>1</div>
<trieda div="dva">2</div>
<trieda div="tri">3</div>
<trieda div="štyri">4</div>
<trieda div="päť">5</div>
</div>Tu je CSS:
.kontajner {
displej: mriežka;
šírka: 100 %;
grid-template-rows: repeat (3, 1fr);
grid-template-columns: repeat (3, 1fr);
medzera: 0.5rem;
orámovanie: 1px plná čierna;
výška: 300px;
}.kontajner > div {
farba pozadia: červená;
farba: biela;
veľkosť písma: 5rem;
text-align: center;
border-radius: 5px;
}
.kontajner > .dva {
rad mriežky: 2;
mriežka-stĺpec: 2;
}
Tu je výstup:
CSS Grid tiež obsahuje veľa ďalšie vlastnosti, ktoré môžete použiť na vytvorenie zložitejších rozložení.
Ktorý by ste mali použiť?
Po prvé, je dôležité poznamenať, že vám nič nebráni v tom, aby ste Flexbox a Grid používali spolu a v niektorých prípadoch je to optimálna voľba. To znamená, že odpovedzme na otázku, ktoré rozloženie je pre každý z týchto systémov najvhodnejšie.
Flexbox je najvhodnejší pre usporiadanie budov, ktoré zahŕňajú zarovnanie a rozmiestnenie prvkov na jednej linke. Príklady tohto druhu rozloženia sú zarovnanie ikon na konci sekcie alebo usporiadanie prepojení v navigačnom paneli.
Mriežka, na druhej strane, svieti najjasnejšie, keď musíte presne umiestniť prvky vzhľadom na ostatné (horizontálne aj vertikálne) a toto umiestnenie potrebujete na jednoduché prispôsobenie rôznym veľkostiam obrazovky.
Na demonštráciu uvádzame kód, ktorý by ste museli napísať, aby ste znovu vytvorili rozloženie z príkladu Grid s Flexboxom.
HTML:
<trieda div="kontajner">
<trieda div="pod jedným">
<div>1</div>
<div>5</div>
</div><trieda div="pod dva">
<div>2</div>
</div>
<trieda div="pod tri">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.kontajner {
orámovanie: 1px plná čierna;
výška: 300px;
}.sub {
displej: flex;
šírka: 100 %;
}.jeden, .tri {
justify-content: medzera-medzi
}.dva {
zdôvodniť-obsah: stred;
}
.sub > div {
výška: 100px;
šírka: 100px;
farba pozadia: červená;
farba: biela;
veľkosť písma: 5rem;
text-align: center;
border-radius: 5px;
}
A tu je výstup:
Hlavná vec, ktorú treba poznamenať, je, že zatiaľ čo tento kód vytvára rovnaký výstup ako príklad Grid, značenie je tu podstatne komplikovanejšie. Implementácia tohto rozloženia vyžaduje podkontajnery a očíslované divy musíte umiestniť mimo poradia v značke.
Ďalej predpokladajme, že ste potrebovali posunúť toto rozloženie do nepríjemnej polohy: povedzme zarovnanie 5. divu s 2. div. Ak by ste na to použili Flexbox, museli by ste sa uchýliť poloha: relatívna alebo niečo podobné. Pomocou mriežky všetko, čo potrebujete, je posunúť mriežka-stĺpec nehnuteľnosť.
Na rozdiel od toho by však implementácia jednoduchého zarovnania jedného riadku z príkladu Flexbox s mriežkou viedla k oveľa viac CSS. Mriežka je zjavne menej vhodná pre tento druh rozloženia.
Zatiaľ čo Flexbox a Grid dokážu väčšinou navzájom replikovať svoje efekty, existuje niekoľko výnimiek. Vytvorenie prekrývania prvkov je dosť ťažké len s Flexboxom, ale je veľmi jednoduché s Grid. Mriežka tiež neumožňuje, aby sa prvky odtláčali od ostatných prvkov s okrajom: auto, ako to robí Flexbox.
Flexbox a Grid sú výkonné systémy rozloženia
Flexbox a CSS Grid sú dizajnové systémy, ktoré zjednodušujú rozvrhnutie obsahu vašej webovej stránky. Mriežka je najvhodnejšia pre dvojrozmerné rozloženia s mnohými prvkami, ktoré je potrebné navzájom presne umiestniť. Flexbox je lepší pre jednorozmerné alebo jednoriadkové rozloženia, kde stačí rozmiestniť množstvo prvkov určitým spôsobom.
