Chcete-li vytvářet ohromující a responzivní webové stránky, je nutné dobře rozumět Flexbox a CSS Grid.
Pokud píšete CSS jakkoli dlouho, je velká šance, že jste o těchto pojmech alespoň slyšeli. Možná jste do určité míry použili jeden nebo oba. Obě jsou výkonné části CSS s podobnými, ale jemně odlišnými případy použití.
Co je Flexbox?
Flexbox je jednorozměrná metoda rozvržení CSS, která existuje již nějakou dobu. Flexbox si můžete představit jako hromadu souvisejících vlastností CSS, které můžete použít k zarovnání prvků HTML v kontejneru a ke správě prostoru mezi nimi.
Před Flexboxem vyžadoval tento typ uspořádání frustrující a nepraktické použití plováku a vlastnosti polohy.
Pokud se obáváte podpory prohlížeče Flexbox, nemějte obavy. Podle caniuse.com, všechny moderní prohlížeče podporují Flexbox.
Základy Flexboxu
Zatímco Flexbox obsahuje mnoho vlastností CSS, základy jsou docela jednoduché. Používání Flexboxu vždy začíná deklarováním nadřazeného kontejneru jako flex-kontejneru přidáním displej: flex
na jeho stylová pravidla. Tím se automaticky stanou všechny potomky tohoto prvku flexibilními položkami.Poté můžete ovládat rozložení prostoru v flex-kontejneru pomocí vlastnost justify-content. Můžete ovládat zarovnání flexibilních položek s zarovnat-položky vlastnictví.
Zde je příklad kódu, který používá Flexbox k rovnoměrnému rozložení prostoru v kontejneru mezi jeho potomky a zarovnání všech do středu kontejneru. Toto je HTML:
<třída div="kontejner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Toto je CSS:
.kontejner {
displej: flex;
šířka: 100 %;
justify-content: space-around;
align-items: center;
ohraničení: 1px plná černá;
výška: 200px;
}
.kontejner > div {
výška: 100px;
šířka: 100px;
barva pozadí: červená;
barva bílá;
velikost písma: 5rem;
text-align: center;
border-radius: 5px;
}
A tady je výstup:
Co je mřížka CSS?
CSS Grid je systém rozložení, který doplňuje Flexbox. Flexbox je výkonný, ale pro určité typy rozvržení se příliš nehodí. Pokus o rozložení struktury celé stránky pomocí Flexbox skončí jako frustrující úkol zahrnující ošklivé, nesématické značení a přehnané CSS.
CSS Grid není náhradou Flexboxu, ale spíše alternativním systémem pro některé situace.
Podpora pro CSS Grid není tak rozsáhlá jako pro Flexbox, ale Grid ano přiměřeně dobře podporováno v roce 2022.
Základy CSS Grid
Koncept Gridu je jednoduchý. Jak název napovídá, CSS Grid umožňuje rozdělit prostor v nadřazeném kontejneru na mřížku řádků a sloupců s libovolným počtem řádků/sloupců, které se vám líbí. Poté určíte polohu podřízených položek odkazem na řádky rodičovské mřížky.
Začněte přidáváním displej: mřížka do nadřazeného kontejneru. Poté použijte grid-template-rows a mřížka-šablona-sloupce vlastnosti k určení řádků a sloupců, na které chcete mřížku rozdělit. Poté můžete použít mřížka-sloupec a mřížka-řada vlastnosti na podřízených prvcích, abyste jim řekli, kde v mřížce mají být. Podívejme se na příklad mřížky, který používá pětiprvkové nastavení z dřívějška, ale ve složitějším uspořádání.
Zde je HTML:
<třída div="kontejner">
<div>1</div>
<třída div="dva">2</div>
<třída div="tři">3</div>
<třída div="čtyři">4</div>
<třída div="Pět">5</div>
</div>Tady je CSS:
.kontejner {
displej: mřížka;
šířka: 100 %;
grid-template-rows: repeat (3, 1fr);
grid-template-columns: repeat (3, 1fr);
mezera: 0.5rem;
ohraničení: 1px plná černá;
výška: 300px;
}.kontejner > div {
barva pozadí: červená;
barva bílá;
velikost písma: 5rem;
text-align: center;
border-radius: 5px;
}
.kontejner > .dva {
mřížka-řada: 2;
mřížka-sloupec: 2;
}
Zde je výstup:
CSS Grid také obsahuje hodně další vlastnosti, které můžete použít k vytvoření složitějších rozvržení.
Který byste měli použít?
Za prvé, je důležité si uvědomit, že vám nic nebrání používat Flexbox a Grid společně a v některých případech je to optimální volba. To znamená, že odpovězme na otázku, které rozvržení je pro každý z těchto systémů nejvhodnější.
Flexbox se nejlépe hodí pro rozvržení budov, které zahrnují zarovnání a distribuci prvků na jedné lince. Příklady tohoto druhu rozvržení jsou zarovnání ikon na konci sekce nebo uspořádání odkazů v navigační liště.
Mřížka na druhé straně svítí nejjasněji, když musíte přesně umístit prvky vzhledem k ostatním (vodorovně i svisle) a toto umístění potřebujete, abyste se snadno přizpůsobili různým velikostem obrazovky.
Abychom demonstrovali, zde je kód, který byste museli napsat, abyste znovu vytvořili rozložení z příkladu mřížky pomocí Flexbox.
HTML:
<třída div="kontejner">
<třída div="podjednou">
<div>1</div>
<div>5</div>
</div><třída div="pod dva">
<div>2</div>
</div>
<třída div="pod tři">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.kontejner {
ohraničení: 1px plná černá;
výška: 300px;
}.sub {
displej: flex;
šířka: 100 %;
}.jeden, .tři {
justify-content: mezera-mezi
}.dva {
justify-content: center;
}
.sub > div {
výška: 100px;
šířka: 100px;
barva pozadí: červená;
barva bílá;
velikost písma: 5rem;
text-align: center;
border-radius: 5px;
}
A tady je výstup:
Hlavní věc, kterou je třeba poznamenat, je, že zatímco tento kód produkuje stejný výstup jako příklad Grid, značkování je zde výrazně komplikovanější. Implementace tohoto rozvržení vyžaduje podkontejnery a číslované divy musíte v označení umístit mimo pořadí.
Dále předpokládejme, že jste potřebovali přesunout toto rozložení do nepříjemné pozice: řekněme zarovnání 5. divu s 2. divem. Pokud byste k tomu použili Flexbox, museli byste se uchýlit poloha: relativní nebo něco podobného. Pomocí mřížky vše, co potřebujete, je posunout mřížka-sloupec vlastnictví.
Ale naproti tomu implementace jednoduchého zarovnání jednoho řádku z příkladu Flexbox s mřížkou by vedla k mnohem více CSS. Mřížka je zjevně méně vhodná pro tento druh rozvržení.
Zatímco Flexbox a Grid většinou dokážou vzájemně replikovat své efekty, existují výjimky. Překrývání prvků je velmi obtížné pouze s Flexboxem, ale je velmi snadné s Grid. Mřížka také neumožňuje prvkům, aby se odsunuly od ostatních prvků s okrajem: auto jako Flexbox.
Flexbox a Grid jsou výkonné systémy rozvržení
Flexbox a CSS Grid jsou návrhové systémy, které usnadňují uspořádání obsahu vaší webové stránky. Mřížka je nejlepší pro dvourozměrná rozvržení s mnoha prvky, které je třeba vůči sobě přesně umístit. Flexbox je lepší pro jednorozměrné nebo jednořádkové rozvržení, kde stačí rozmístit spoustu prvků určitým způsobem.
