Čo je Flexbox? Popis všetkých vlastností css, základných princípov, výhod a nevýhod. Flexbox niekoľko užitočných príkladov práce s užitočnými odkazmi Flex

Flexboxy sú ideálne na vytváranie bežne používaných rozložení webových stránok, ako je napríklad trojstĺpcový, takzvaný „svätý grál“, kde by všetky stĺpce mali zaberať plnú výšku bez ohľadu na ich obsah. V tomto prípade je v zdrojovom kóde hlavný obsah pred navigáciou a na samotnej stránke je hlavný obsah po navigácii.

Páči sa ti to.

Príklad

Klobúk

Článok

Pred príchodom flexboxu bolo dosť ťažké získať tento druh rozloženia bez použitia nejakého hacku. Vývojári museli často robiť veci, ako je pridávanie ďalších značiek, používanie záporných okrajov a ďalšie triky, aby sa všetko správne zoradilo bez ohľadu na množstvo obsahu alebo veľkosť obrazovky. Ako však ukazuje príklad vyššie, na flexboxe je všetko oveľa jednoduchšie.

Tu je zhrnutie kódu. V tomto príklade urobíme z prvku #main flexibilný kontajner, pričom hlavičku a pätu ponecháme ako prvky na úrovni bloku. Inými slovami, iba stredná časť sa stáva flexboxom. Tu je úryvok, ktorý z neho robí flexibilný kontajner.

#hlavný ( displej: flex; min-výška: calc(100vh - 40vh); )

Na výrobu flex kontajnera používame len display: flex. Všimnite si, že sme tiež nastavili hodnotu min-height pomocou funkcie calc() a nastavili #main na 100 % výšky výrezu mínus výška uzáveru a suterénu (každý 20vh). To zaisťuje, že rozloženie zaberie celú výšku obrazovky, aj keď má málo obsahu. V dôsledku toho sa päta nikdy nezvýši a nezostane pod ňou prázdne miesto, ak obsah zaberie menej ako výšku obrazovky.

Výpočet minimálnej výšky bol dosť jednoduchý vzhľadom na to, že sme na všetky prvky použili veľkosť boxu: border-box. Ak by sme to neurobili, museli by sme pridať hodnota výplne na sumu, ktorá sa má odpočítať.

Po inštalácii flex kontajnera sa zaoberáme flex položkami.

#hlavný > článok ( flex: 1; ) #main > nav, #main > aside ( flex: 0 0 20vw; background: beige; ) #main > nav (poradie: -1; )

Vlastnosť flex je skratka pre vlastnosti flex-grow, flex-shrink a flex-base. V prvom prípade sme napísali iba jednu hodnotu, takže flex nastavuje vlastnosť flex-grow. V druhom prípade sme napísali všetky tri hodnoty pre

na nastavenie flex-grow na nulu, flex-shrink na nulu a flex-base na 20vw. Vlastnosť flex-base nastavuje pôvodnú základnú veľkosť flex položky pred pridelením voľného miesta. Nastavíme teda len šírku

, ako aj ich farbu pozadia.

V tomto článku sa zoznámime s technológiou CSS Flexbox, určenou na vytváranie flexibilných rozložení webových stránok.

Účel CSS Flexbox

CSS Flexbox je pre vytváranie flexibilných rozložení. Pomocou tejto technológie je veľmi jednoduché a flexibilné usporiadať prvky v kontajneri, rozdeliť medzi ne dostupný priestor a zarovnať ich tak či onak, aj keď nemajú špecifickú veľkosť.

CSS Flexbox uľahčuje vytváranie responzívneho dizajnu ako používanie float a polohovania.

Flexbox je možné použiť ako pre CSS označenie celej stránky, tak aj jej jednotlivých blokov.

Podpora prehliadača CSS Flexbox

CSS Flexbox podporujú všetky v súčasnosti používané moderné prehliadače (s použitím prefixov: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Základy CSS Flexbox

Vytváranie značiek CSS pomocou Flexbox začína nastavením vlastnosti zobrazenia CSS požadovaného prvku HTML na možnosť flex alebo flex-inline .

Potom sa tento prvok stane flexibilným kontajnerom a všetkým okamžitý podradené prvky sú flexibilné položky. Navyše, keď hovoríme o flexboxe, myslíme tým iba prvok s display:flex alebo display:flex-inline a všetky prvky priamo nachádza v ňom. V CSS Flexbox teda existujú iba dva typy prvkov: flex kontajner a flex prvok.

Pre podporu rozloženia vo väčšine prehliadačov boli do CSS pridané vlastnosti predpony a maximálnej šírky.

Na „premenu“ bloku na flexibilný kontajner sa používa trieda riadkov. Nastavenie šírky prvkov .col__article a .col__aside vo vnútri kontajnera flex sa vykonáva pomocou vlastnosti flex CSS.

Ako príklad si rozložíme ďalšiu pätu pomocou flexboxu a vytvoríme blok pozostávajúci z troch prvkov v prvku .col__article (minimálna šírka jedného prvku je 300px). Do päty umiestnime štyri bloky (minimálna šírka jedného bloku je 200px).

Chcel by som hovoriť o FlexBoxe. Modul rozloženia Flexbox (flexibilný box – „flexibilný blok“, v súčasnosti odporúčanie kandidáta W3C) má za cieľ ponúknuť efektívnejší spôsob rozloženia, zarovnania a distribúcie voľného priestoru medzi prvkami v kontajneri, aj keď ich veľkosť je neznáma a/alebo dynamická ( preto slovo „flexibilný“).

Hlavnou myšlienkou flexibilného usporiadania je poskytnúť kontajneru možnosť zmeniť šírku / výšku (a poradie) svojich prvkov, aby lepšie vyplnili priestor (vo väčšine prípadov na podporu všetkých typov displejov a veľkostí obrazoviek).Flexibilná nádoba naťahuje predmety, aby zaplnila priestor, alebo ich stláča, aby sa zabránilo pretečeniu.

Najdôležitejšie je, že rozloženie flexboxu je na rozdiel od bežného rozloženia nezávislé od smeru (boxy sú naskladané zvisle a vložené prvky vodorovne).Zatiaľ čo bežné rozloženie je skvelé pre webové stránky, chýba mu flexibilita na podporu veľkých alebo zložitých aplikácií (najmä pokiaľ ide o zmenu orientácie obrazovky, zmenu veľkosti, roztiahnutie, stlačenie atď.).

Pretože flexbox je celý modul, nie len jedna vlastnosť, kombinuje mnoho vlastností.Niektoré z nich musia byť aplikované na kontajner (nadradeného prvku, známeho ako flexibilný kontajner), zatiaľ čo iné vlastnosti sa vzťahujú na podradené prvky alebo flexibilné položky.

Zatiaľ čo bežné usporiadanie je založené na smeroch toku blokových a inline prvkov, flexibilné usporiadanie je založené na "flexibilných smeroch toku".

Flexbox

V zásade budú položky rozmiestnené buď pozdĺž hlavnej osi (od hlavného začiatku po hlavný koniec) alebo pozdĺž priečnej osi (od krížového začiatku po krížový koniec).

hlavná os - hlavná os, pozdĺž ktorej sú umiestnené flexibilné položky.Upozorňujeme, že musí byť horizontálne, všetko závisí od kvality odôvodnenia obsahu.
hlavný štart | main-end - flex položky sú umiestnené v kontajneri z hlavnej-začiatočnej polohy do hlavnej-koncovej polohy.
hlavná veľkosť - šírka alebo výška ohybného prvku v závislosti od zvolenej hlavnej veľkosti.Základnou hodnotou môže byť šírka alebo výška prvku.
krížová os — priečna os kolmá na hlavnú.Jeho smer závisí od smeru hlavnej osi.
krížový štart | cross-end - ohybné linky sú naplnené predmetmi a umiestnené do kontajnera z krížovej počiatočnej polohy a krížovej koncovej polohy.
veľkosť kríža - šírka alebo výška flex prvku v závislosti od zvoleného rozmeru sa rovná tejto hodnote.Táto vlastnosť je rovnaká ako šírka alebo výška prvku v závislosti od zvoleného rozmeru.

Vlastnosti
displej: flex | inline-flex;

Definuje flexibilný kontajner (buď vložený alebo blokový v závislosti od vybranej hodnoty), zahŕňa flexibilný kontext pre všetky jeho bezprostredné potomky.

zobrazenie: iné hodnoty | flex | inline-flex;

Mysli na to:

Stĺpce CSS nefungujú s kontajnerom Flexfloat, clear a vertical-align nefungujú na flexibilných predmetoch

smer ohybu