Flexbox - Ultimate CSS Flex Cheatheet (s animovanými diagramami!)

Táto komplexná cheatová stránka s flexboxom CSS pokryje všetko, čo potrebujete vedieť, aby ste mohli flexbox začať používať vo svojich webových projektoch.

Rozloženie flexboxu CSS vám umožňuje ľahko formátovať HTML. Flexbox umožňuje jednoduché zarovnávanie položiek vertikálne a horizontálne pomocou riadkov a stĺpcov. Položky sa „ohnú“ do rôznych veľkostí, aby vyplnili priestor. Uľahčuje responzívny dizajn.

Flexbox CSS sa skvele hodí na všeobecné rozloženie vášho webu alebo aplikácie. Ľahko sa to učí, je podporované vo všetkých moderných prehľadávačoch a zistenie základov mu nezaberie tak dlho. Na konci tejto príručky budete pripravení začať používať flexbox vo svojich webových projektoch.

Tento článok obsahuje užitočné animované gify od Scotta Domesa, vďaka ktorým bude flexbox ešte ľahšie pochopiteľný a vizualizovateľný.

Všetky vlastnosti CSS Flexbox

Tu je zoznam všetkých vlastností flexboxu CSS, ktoré možno použiť na umiestnenie prvkov v CSS. Ďalej uvidíte, ako fungujú.

CSS, ktoré je možné použiť na kontajner

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, ktoré je možné použiť na položky / prvky v kontajneri

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

Terminológia

Predtým, ako sa dozviete, čo robia vlastnosti flexboxu, je dôležité porozumieť súvisiacej terminológii. Tu sú definície kľúčových pojmov flexboxu prevzaté z oficiálnej špecifikácie W3C pre flexbox.

  • hlavná os : Hlavná os flex kontajnera je primárna os, pozdĺž ktorej sú rozložené flex položky. Smer je založený na vlastnosti flex-direction.
  • hlavný štart | hlavný koniec :Pružné predmety sú umiestnené v kontajneri počnúc stranou hlavného štartu a smerujúcou k strane hlavného konca.
  • hlavná veľkosť : Šírka alebo výška flexibilného kontajnera alebo flex predmetu, podľa toho, ktorý je v hlavnej dimenzii, je hlavnou veľkosťou tohto boxu. Jeho hlavnou vlastnosťou veľkosti je teda buď vlastnosť šírky alebo výšky, podľa toho, ktorá je v hlavnej dimenzii.
  • priečna os : Os kolmá na hlavnú os sa nazýva priečna os. Jeho smer závisí od smeru hlavnej osi.
  • krížový štart | koniec : čiary Flex sú naplnené položkami a vkladajú sa do kontajnera počnúc stranou cross-start flex kontajnera a smerujúcou k strane cross-end.
  • veľkosť kríža : Šírka alebo výška položky flex, podľa toho, ktorá z nich má rozmer kríža, je veľkosť kríža položky. Vlastnosťou veľkosti kríža je ktorákoľvek zo „šírky“ alebo „výšky“, ktorá je v krížovej dimenzii.

Flexibilita displeja CSS

display: flex je vášmu prehliadaču povedané: „Chcem, prosím, použiť flexbox s týmto kontajnerom.“

A divprvok predvolená hodnota display:block. Prvok s týmto nastavením zobrazenia zaberá celú šírku čiary, na ktorej je. Tu je príklad štyroch farebných prvkov div v rodičovskom prvku div s predvoleným nastavením zobrazenia:

Ak chcete použiť flexbox v časti svojej stránky, najskôr preveďte nadradený kontajner na flexibilný kontajner pridaním display: flex;do CSS nadradeného kontajnera.

Týmto sa tento kontajner inicializuje ako kontajner flex a použijú sa niektoré predvolené vlastnosti flexu.

Flex Direction

flex-directionumožňuje ovládať spôsob zobrazenia položiek v kontajneri. Chcete, aby boli zľava doprava, sprava doľava, zhora nadol alebo zdola nahor? Všetky tieto činnosti môžete urobiť ľahko nastavením flex-directionkontajnera.

Predvolené usporiadanie po podaní žiadosti display: flexje, aby boli položky usporiadané pozdĺž hlavnej osi zľava doprava. Animácia uvedená nižšie ukazuje, čo sa stane, keď flex-direction: columnsa pridá do prvku kontajnera.

Môžete tiež nastaviť flex-direction, aby row-reverseaj column-reverse.

Zarovnajte obsah

justify-contentje vlastnosť na zarovnanie položiek v kontajneri pozdĺž hlavnej osi (pozri terminologický diagram vyššie). To sa mení v závislosti od toho, ako sa zobrazuje obsah. Umožňuje nám to vyplniť akékoľvek prázdne miesto v riadkoch a definovať, ako to chceme „odôvodniť“.

Tu sú naše najčastejšie možnosti používané na ospravedlnenie obsahu: flex-start | flex-end | center | space-between | space-around.

Takto vyzerajú rôzne možnosti:

space-betweendistribuuje položky tak, aby prvá položka bola v jednej rovine so začiatkom a posledná v jednej rovine s koncom. space-aroundje podobné, ale položky majú na oboch koncoch medzeru polovičnej veľkosti.

Flex Align Items

align-itemsumožňuje nám zarovnať položky pozdĺž priečnej osi (pozri terminologický diagram vyššie). Toto umožňuje umiestnenie obsahu rôznymi spôsobmi pomocou zarovnania obsahu a zarovnania položiek dohromady.

Tu sú najbežnejšie možnosti používané na zarovnanie položiek: flex-start | flex-end | center | baseline | stretch

Aby stretchto fungovalo, ako by ste čakali, musí byť výška prvkov nastavená na autonamiesto konkrétnej výšky.

Táto animácia ukazuje, ako vyzerajú možnosti:

Teraz použijeme obidve justify-contenta align-items. Týmto sa zobrazí rozdiel medzi hlavnými osami a priečnymi osami.

Zarovnať seba

align-self umožňuje upraviť zarovnanie jedného prvku.

Má všetky rovnaké vlastnosti align-items.

V nasledujúcej animácii má nadradený prvok div CSS align-items: centera flex-direction: row. Prvé dva štvorce prechádzajú rôznymi align-selfhodnotami.

Flex Wrap

Flexbox sa predvolene pokúsi všetky prvky umiestniť do jedného radu. Môžete to však zmeniť s flex-wrapmajetkom. Existujú tri hodnoty, ktoré môžete použiť na určenie, kedy sa prvky dostanú do iného riadku.

Predvolená hodnota je flex-wrap: nowrap. To spôsobí, že všetko zostane v jednom rade zľava doprava.

flex-wrap: wrap  umožní položkám vyskočiť na ďalší riadok, ak v prvom rade nie je dostatok miesta. Položky sa budú zobrazovať zľava doprava.

flex-wrap: wrap-reverse tiež umožňuje položkám vyskočiť na ďalší riadok, ale tentokrát sa položky zobrazujú sprava doľava.

Flex Flow

flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;

Align Content

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Vertically Centering with Flexbox

If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:

.parent { display: flex; align-items: center; }

Games and Apps

If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

  • Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
  • Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
  • Flexyboxes je aplikácia, ktorá vám umožňuje vidieť ukážky kódu a meniť parametre, aby ste videli, ako Flexbox vizuálne funguje.
  • Flexbox Patters je webová stránka, ktorá ukazuje množstvo príkladov Flexbox.

Záver

Pokryli sme všetky najbežnejšie vlastnosti flexboxu CSS. Ďalším krokom je prax! Skúste urobiť niekoľko projektov pomocou flexboxu, aby ste si mohli zvyknúť na jeho fungovanie.