Rozložení CSS: Flexbox vs G | R | I | D

Jaký je nejlepší způsob, jak přistupovat k návrhu rozložení na webu s ohledem na vaše potřeby? Existuje mnoho způsobů, jak tento problém vyřešit, ale dva z nejpopulárnějších moderních metod jsou používání Flexbox a Grid. Navrženo a implementováno před 7 lety v CSS, oba tyto systémy rozvržení dávají designérovi spoustu výkonných a přizpůsobivých nástrojů pro práci s nimi.

FLEXBOX

Flexbox je skvělý nástroj pro rozvržení při plnění kontejneru neznámým počtem položek nebo položek neznámých rozměrů. Flex kontejner může změnit velikost svých položek tak, aby lépe seděl a může se také rozšiřovat nebo stahovat s ohledem na počet položek. Přestože nastavením rozvržení flex-wrap flexboxu může po dosažení konce nadřazeného kontejneru zabrat více řádků, je „jednorozměrné“, protože dokáže ohýbat položky pouze vodorovně nebo svisle.

vtipný flex doge

FLEXOVÉ VLASTNOSTI

Zobrazit

Nastavení displeje: flex na nadřazeném prvku jej nastaví jako flex box.

flex-direction

Označuje, zda je ohebné uspořádání vodorovné nebo svislé.

flex-wrap

Umožňuje kontejneru flex vytvořit nové řádky poté, co položky dosáhnou konce kontejneru.

ospravedlnit-obsah

Nastavuje rozložení podřízených prvků v flexboxu podél hlavní osy.

zarovnat položky

Nastavuje způsob zobrazení podřízených prvků kolmo k hlavní ose.

zarovnat obsah

Vyplní prázdný prostor nadřazeného kontejneru kolmo k hlavní ose nebo natáhne podřízené položky.

zarovnat se

Podobné jako zarovnání položek, ale pro styling na individuálním podřízeném prvku.

PŘÍKLADY

vnořené flexboxy

MŘÍŽKA

Flexbox je skvělý, ale zatím nám pomáhá pouze tehdy, když potřebujeme nějakou strukturu horizontálně i vertikálně. Grid nám pomáhá tento problém vyřešit. Při použití mřížky lze nadřazený kontejner nastavit s řádky i sloupci. Můžete nastavit počet řádků / sloupců, jakož i jejich rozměry a případně názvy.

Při vyplňování mřížky kontejneru s podřízenými prvky je nastavení jejich umístění rozvržení stejně jednoduché jako nastavení počátečního a koncového bodu sloupce mřížky a řádku mřížky. Limity lze zvolit podle čísla řádku mřížky nebo přiřazeného názvu.

přes https://www.reddit.com/user/Gordone_Uomolibero

VLASTNOSTI GRIDU

Zobrazit

Nastavením zobrazení nadřazeného prvku na mřížku se nastaví rozvržení mřížky. Mohou být také použity in-grid nebo subgrids.

grid-template

Nastavení sloupců mřížky-šablony nebo řádků mřížky šablony určí počet sloupců / řádků a jejich velikost. K nastavení šířky nebo výšky lze použít hodnoty pixelů, procenta nebo zlomky (z prostoru kontejneru) nebo „auto“.

Auto lze také použít k nastavení neurčitého počtu sloupců / řádků.

grid-auto

Tento parametr lze použít k nastavení velikosti automaticky generovaných sloupců nebo řádků.

grid-auto-flow

Nastavuje, jak budou podřízené prvky automaticky vyplňovat řádky nebo sloupce, pokud není uvedeno jinak.

grid-area & grid-template-area

Oblast mřížky lze použít k pojmenování oblastí mřížky a oblast mřížky-šablony lze použít k nastavení stylu rozvržení odkazem na oblasti mřížky podle názvu.

ospravedlnit vs zarovnat: položky, obsah a self

Vlastnosti zarovnání a zarovnání mohou být nastaveny na prvky stylu vodorovně nebo svisle. Při nastavování těchto vlastností na nadřazeném prvku vyplní obsah zarovnání / zarovnání obsahu nevyužitý prostor kontejneru kolem sloupců / řádků mřížky nebo je natáhne, aby vyplnil kontejner. Nastavení položek zarovnání / zarovnání určí, jak je každý podřízený prvek umístěn v přiřazeném prostoru mřížky.

Zarovnání a zarovnání lze použít také na podřízené prvky podobné nastavení stylu na položkách nadřazených. Nastavení justify-self nebo zarovnání-self umísťuje tento podřízený prvek do přiřazeného mřížkového prostoru.

PŘÍKLADY

Příklad mřížky a podřízené položky

DALŠÍ ČTENÍ