Ako Flexbox funguje - vysvetlené veľkými, farebnými, animovanými gifmi

Flexbox sľubuje, že nás zachráni pred zlami jednoduchých CSS (napríklad vertikálne zarovnanie).

Flexbox tento cieľ plní. Osvojiť si nový mentálny model však môže byť náročné.

Poďme sa teda animovane pozrieť na to, ako Flexbox funguje, aby sme ho mohli použiť na vytvorenie lepšieho rozloženia.

Základným princípom Flexboxu je dosiahnuť, aby boli rozloženia flexibilné a intuitívne.

Aby to bolo možné dosiahnuť, umožňuje kontajnerom samy rozhodnúť, ako rovnomerne rozložiť ich deti - vrátane ich veľkosti a priestoru medzi nimi.

To všetko znie v zásade dobre. Pozrime sa však, ako to vyzerá v praxi.

V tomto článku sa budeme venovať 5 najbežnejším vlastnostiam Flexboxu. Preskúmame, čo robia, ako ich môžete použiť a ako budú v skutočnosti vyzerať ich výsledky.

Vlastnosť # 1: Displej: Flex

Tu je náš príklad webovej stránky:

Máte štyri farebné odznaky rôznych veľkostí, ktoré sú držané v sivej farbe kontajnera. Odteraz má každý div predvolené hodnoty display: block. Každý štvorec tak zaberá celú šírku svojej čiary.

Aby ste mohli začať s Flexboxom, musíte svoj kontajner zmeniť na flex kontajner . Je to také ľahké ako:

#container { display: flex;}

Nezmenilo sa veľa - vaše divy sa teraz zobrazujú vložené, ale to je tak všetko. Ale v zákulisí ste dokázali niečo silné. Svojim štvorcom ste dali niečo, čo sa nazýva kontext flex .

Teraz ich môžete začať umiestňovať v tomto kontexte s oveľa menšími ťažkosťami ako tradičné CSS.

Majetok č. 2: Smer flexibilnosti

Kontajner Flexbox má dve osi: hlavnú a priečnu , ktoré predvolene vyzerajú takto:

Predvolene sú položky usporiadané pozdĺž hlavnej osi zľava doprava . To je dôvod, prečo sa vaše štvorce po použití predvolene nastavili na vodorovnú čiaru display: flex.

Flex-direction, poďme však otočiť hlavnú os.

#container { display: flex; flex-direction: column;}

Tu je potrebné urobiť dôležité rozlíšenie: flex-direction: columnnezarovnáva štvorce na priečnej osi namiesto na hlavnú os. Prinúti samotnú hlavnú os prechádzať z horizontálnej do vertikálnej.

Existuje ešte niekoľko ďalších možností smeru ohybu: riadok dozadu a stĺpec dozadu.

Vlastnosť č. 3: Zarovnanie obsahu

Justify-content ovláda spôsob zarovnávania položiek na hlavnej osi.

Tu sa ponoríte o niečo hlbšie do rozlíšenia hlavnej a krížovej osi. Najskôr sa vráťme späť do smeru flex-direction: row.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

K dispozícii máte päť príkazov na použitie obsahu justify :

  1. Flex-štart
  2. Flex-end
  3. Stred
  4. Medzipriestor
  5. Vesmír okolo

Priestor okolo a priestor medzi nimi sú najmenej intuitívne. Medzera medzi nimi poskytuje rovnaký priestor medzi každým štvorcom, ale nie medzi ním a kontajnerom.

Medzipriestor kladie na každú stranu štvorca rovnaký vankúš priestoru - čo znamená, že priestor medzi najvzdialenejšími štvorcami a nádobou je o polovicu menší ako priestor medzi dvoma štvorcami (každý štvorec prispieva k neprekrývaniu rovnakého množstva marže, čím sa priestor zdvojnásobil).

Posledná poznámka: nezabudnite, že obsah justify funguje pozdĺž hlavnej osi a smer flex-flex prepína hlavnú os . To bude dôležité pri prechode na ...

Vlastnosť č. 4: Zarovnajte položky

Ak „získate“ obsah justify, zarovnanie položiek bude hračka.

Pretože obsah justify funguje pozdĺž hlavnej osi, položky zarovnania sa použijú na krížovú os.

Obnovme náš smer ohybu na riadok, aby naše osi vyzerali rovnako ako na obrázku vyššie.

Potom sa ponorme do príkazov zarovnania položiek.

  1. flex-štart
  2. flex-end
  3. centrum
  4. natiahnuť
  5. základná čiara

Prvé tri sú úplne rovnaké ako justify-content , takže tu nie je nič príliš vymyslené.

Nasledujúce dva sú však trochu odlišné.

Máte pretiahnutie, v ktorom položky zaberajú celú priečnu os a základnú čiaru, v ktorej sú zarovnané dolné časti značiek odsekov.

(Upozorňujeme, že pre align-items: stretchsom musel nastaviť výšku štvorcov na auto. V opačnom prípade by vlastnosť výšky prepisovala úsek.)

Pre základnú čiaru nezabudnite, že ak odstránite značky odsekov, zarovná sa to spodná časť štvorcov, napríklad takto:

Aby sme lepšie demonštrovali hlavnú a priečnu os, poďme skombinovať položky justify-content a align-items a pozrime sa, ako centrovanie funguje inak pre dva príkazy smeru flex:

Pri rade sú štvorce umiestnené pozdĺž vodorovnej hlavnej osi. So stĺpom padajú pozdĺž zvislej hlavnej osi.

Aj keď sú štvorce v obidvoch prípadoch vertikálne aj horizontálne vycentrované, tieto dva obrazce nie sú vzájomne zameniteľné!

Majetok 5: Zarovnajte seba

Align-self vám umožňuje manuálne manipulovať so zarovnaním jedného konkrétneho prvku.

V zásade ide o prepísanie zarovnávacích položiek pre jeden štvorec. Všetky vlastnosti sú rovnaké, aj keď má predvolené automatické nastavenie , v ktorom sleduje zarovnané položky kontajnera.

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Pozrime sa, ako to vyzerá. Použijete zarovnanie na dva štvorce a na zvyšok použijete align-items: centera flex-direction: row.

Záver

Aj keď sme práve poškriabali povrch Flexboxu, tieto príkazy by vám mali stačiť na to, aby ste zvládli najzákladnejšie zarovnania - a aby sa zvislo zarovnali k obsahu vášho srdca.

Ak chcete vidieť viac návodov GIF Flexbox alebo ak vám tento návod pomohol, stlačte zelené srdce dole alebo zanechajte komentár.

Vďaka za prečítanie!