Všetko o vlastnostiach flexboxu
Koncepcia vlastností Flexboxu spočíva v tom, že kontajneru umožňuje automaticky meniť šírku, výšku a poradie svojich položiek tak, aby čo najlepšie vyplnila dostupný priestor. To môže byť naozaj užitočné na umiestnenie položiek v rôznych veľkostiach a zariadeniach obrazovky. Položky sa rozbalia tak, aby zaplnili akékoľvek voľné miesto, alebo sa zmenšujú, aby sa predišlo pretečeniu.
Mriežka Flexbox CSS pre začiatočníkov
CSS je jednou z prvých a najjednoduchších vecí, ktorú sa môžete naučiť pri vývoji a dizajne webových stránok, ale nemýlite jej jednoduchosť za nedostatok funkcií. Má množstvo úžasných funkcií a schopností pripravených na použitie, jedným z nich je jeho relatívne nový modul rozloženia: vlastnosti Flexboxu.
Vlastnosti Flexboxu sú jedným z novších rozložení dostupných pre CSS3 a je toho veľa, o čom sa dá dozvedieť. Tu získame praktické rozloženie a spôsob jeho použitia. Predtým, ako začneme, tu je však trochu informácií o vlastnostiach Flexboxu:
Čo sú režimy rozloženia?
Zjednodušene povedané, mriežka CSS Flexbox je režim rozloženia. CSS má množstvo existujúcich režimov rozloženia. Režim rozloženia blokov (ako displej: blok) existuje už dlhú dobu. Rozvrhnutie blokov je dobrou voľbou na úpravu úplných dokumentov. Webový prehliadač v predvolenom nastavení považuje niekoľko prvkov, ako sú divy a odseky, za úroveň blokov.
Ďalším bežným režimom rozloženia je inline. Silná značka, vstupná značka a značka kotvy sú príklady prvkov vloženej úrovne. Vývojárske nástroje prehliadača Google Chrome vám dokonca umožňujú zobraziť „vypočítaný štýl“ prvku a určiť vlastnosti a hodnoty CSS, ktoré boli použité na prvky, ktoré vývojár výslovne nenastavil.
Pomerne novšie rozloženie vlastností Flexboxu (flexibilný box) bolo navrhnuté ako efektívnejší spôsob rozloženia, zarovnania a rozdelenia priestoru medzi položkami kontajnera, aj keď je veľkosť týchto položiek dynamická alebo neznáma. Preto pojem „flexibilný“.
Koncept Flexbox Properties
Najdôležitejšia vec, ktorá sa týka vlastností Flexboxu, je, že je agnostická voči smerovaniu. Kým rozloženie bloku je založené na zvislom a inline rozložení je na vodorovnom základe, Flexbox nie je. Blokovanie a inline fungujú dobre v správnych situáciách, ale chýba im flexibilita na podporu komplikovaných alebo veľkých aplikácií, najmä pokiaľ ide o zmenu orientácie, rozťahovania, zmenšovania, zmeny veľkosti a inak zmeny rozmerov prvkov.
Kde sa používajú vlastnosti Flexboxu?
Ako každé iné rozloženie CSS, Flexbox sa najlepšie používa v určitých situáciách. Je vhodný najmä pre malé rozloženia a súčasti aplikácie. V prípade rozloženia väčšieho rozsahu by bolo rozmiestnenie mriežky múdrejšou voľbou.
Prečo je Flexbox preferovaný?
Mnoho vývojárov a dizajnérov dáva prednosť vlastnostiam Flexboxu, kedykoľvek môžu (niekedy príliš často!). Je to preto, lebo vlastnosti Flexboxu sa ľahšie používajú; umiestnenie prvkov je oveľa jednoduchšie, takže môžete získať zložitejšie rozloženia s menším kódovaním. Inými slovami, proces vývoja je jednoduchší.
Sprievodca po vlastnostiach Flexboxu
Teraz, keď už viete niečo o vlastnostiach Flexboxu a o tom, ako a prečo to funguje, je tu podrobný sprievodca rozložením. Model rozloženia sa skladá z rodičovského kontajnera, ktorý sa tiež nazýva „flex kontajner“. Bezprostredné deti z tohto kontajnera sa nazývajú „flex predmety“.
Rozloženie prešlo niekoľkými iteráciami a zmenami syntaxe v priebehu rokov od svojho prvého návrhu v roku 2009. Najnovšia špecifikácia Flexbox je podporovaná v nasledujúcich webových prehľadávačoch:
- Opera 17+
- Internet Explorer 11+
- Mozilla Firefox 28+
- Google Chrome 29+
- Apple Safari 6.1+
- Android 4.4 alebo novší
- iOS 7.1+
Terminológia použitá vo vlastnostiach Flexboxu
Tu je pohľad na niektoré základné pojmy používané v rozložení vlastností Flexboxu:
- Displej: Tento príkaz sa používa na definovanie flex kontajnera. Mohlo by to byť vložené alebo blokované, v závislosti od. Tiež definuje flex obsah pre všetky položky v kontajneri. Príklad:
.container (
displej: flex; / * alebo inline-flex * /
)
- Poradie: Položky Flex sú štandardne usporiadané podľa poradia zdroja, ale vlastnosť „order“ môže riadiť poradie, v akom sa položky objavia v kontajneri. Príklad:
.item (
objednať: ;
)
- Flex-direction: Táto objednávka nastavuje hlavnú os, definujúcu smer, v ktorom sú flex predmety umiestnené v kontajneri. Položky flex môžu byť primárne usporiadané vo vertikálnom alebo horizontálnom smere. Príklad:
.container (
flex-direction: row | row-reverse | column | column-reverse;
)
- Flex-grow: Táto objednávka definuje schopnosť flex položky automaticky zväčšiť, ak má priestor. Môže akceptovať hodnotu bez jednotky, aby slúžila ako pomer. Táto hodnota určuje, koľko miesta by mal predmet zaberať v flex kontajneri. Napríklad, ak všetky položky majú flex-grow nastavený na 1, zostávajúci priestor v kontajneri sa rovnomerne rozdelí medzi všetky deti. Ak je hodnota 2, zostávajúci priestor zaberá dvakrát toľko miesta ako zvyšok. Príklad:
.item (
flex-grow:; / * predvolené 0 * /
)
- Flex-shrink: To robí presný opak, ako flex-grow, tým, že zmenšuje flex položky, keď je to potrebné. Príklad:
.item (
flex-shrink:; / * predvolené 1 * /
)
- Flex-based: Táto objednávka definuje predvolenú veľkosť prvkov pred distribúciou zvyšku priestoru. Môže to byť dĺžka, napríklad 5rem alebo 20%, alebo kľúčové slovo. Kľúčové slovo „auto“ označuje, že sa meria šírka a výška položky, a kľúčové slovo „obsah“ označuje, že veľkosť položky je založená na jej obsahu. Príklad:
.item (
flex-based: | auto; / * predvolené auto * /
)
- Flex: Toto je kombinovaná skratka pre všetky vyššie uvedené tri vlastnosti: flex-grow, flex-based a flex-shrink. Predvolená hodnota je „0 1 auto“.
.item (
flex: žiadne | (||)
)
- Zarovnať obsah: Toto poradie definuje zarovnanie hlavnej osi a pomáha distribuovať ďalšie voľné miesto, ak zostanú nejaké položky, keď sú položky neflexibilné alebo dosiahli svoju maximálnu veľkosť. To tiež pomáha kontrolovať zarovnanie položky, keď dôjde k pretečeniu.
.container (
justify-content: flex-start | flex koniec centrum medzera | space-around;
)
- Zarovnať položky: Používa sa na definovanie predvoleného správania rozloženia položiek flex na priečnej osi aktuálnej čiary. V podstate ide o verziu „odôvodneného obsahu“ na priečnej osi, ktorá je kolmá na hlavnú os. Príklad:
.container (
Zarovnať položky: flex-start | flex-end | centrum základná línia pretiahnuť;
)
- Zarovnať obsah: Toto poradie zarovnáva línie kontajnera v prípade, že je na priečnej osi ďalší priestor. Je to podobné ako „justify-content“, ale namiesto hlavnej osi pre priečnu os. Ak existuje iba jeden riadok položiek flex, táto vlastnosť nemá žiadny účinok. Príklad:
.container (
align-content: flex-start | flex-end | centrum medzera | priestor okolo | pretiahnuť;
)
Používanie vlastností Flexboxu
Ak chcete použiť rozloženie Flexbox, môžete jednoducho nastaviť vlastnosť zobrazenia na nadradenom prvku HTML, ako je uvedené nižšie:
.flex-container (
displej: -webkit-flex; / * Safari * /
displej: flex;
)
Ak dávate prednosť zobrazeniu ako vložený prvok, môžete napísať:
.flex-container (
displej: -webkit-inline-flex; / * Safari * /
displej: inline-flex;
)
Vyžadujete iba, aby bola táto vlastnosť nastavená na nadradený flex flex kontajner a jeho okamžité flex flex položky. Deti v kontajneri sa automaticky stanú flexibilnými predmetmi.
Odporúčané kurzy
- Online kurz o bezplatnom jQuery
- Online kurz zadarmo Angular JS
- Online školenie o Mudboxe
- Certifikačné školenie v Ruby zadarmo
Vlastnosti Flexboxu - Vlastnosti kontajnera Flex
Existuje mnoho spôsobov, ako zoskupiť vlastnosti Flexboxu, a najjednoduchší spôsob, ako sa o nich dozvedieť, je ich rozdelenie do vlastností kontajnera Flex a položky. Práve sme zakryli niektoré z vlastností flexibilných kontajnerov vyššie. Pozrime sa na zvyšok:
-
Flex-smer: riadok alebo stĺpec
Vlastnosť ohýbania sa môže usporiadať ako stĺpce vertikálne alebo ako riadky horizontálne. Pri smere riadkov sa flex položky v predvolenom nastavení ukladajú zľava doprava. Riadok dozadu mení tento smer na sprava doľava. Smer stĺpca je v predvolenom nastavení zhora nadol a funkcia stĺpca reverzuje tento smer smerom zdola nahor.
-
Flex-wrap: teraz zabaliť alebo zabaliť
Vlastnosť flex-wrap riadi, či sú deti flexibilného obalu rozmiestnené vo viacerých alebo jednoduchých riadkoch a smer, v ktorom sú nové riadky naskladané. Hodnota nowrap vidí flex položky zobrazené v jednom riadku, zmenšené tak, aby sa v predvolenom nastavení prispôsobili šírke kontajnera. Hodnota zábalu vidí flex položky zobrazené v rôznych riadkoch v smere zľava doprava alebo zhora nadol. Ak chcete zmeniť objednávku, môžete pridať zalomenie. Predvolená hodnota je nowrap.
-
Flex-flow
Táto vlastnosť je v podstate skratka na nastavenie vlastností flex-direction a flex-wrap dohromady. Predvolená hodnota je 'row nowrap'. Príklad:
.flex-container (
flex-flow: ||
)
-
Odôvodňujú-content
Vlastnosť justify-content má štyri hodnoty: flex-start na zarovnanie položiek k ľavej strane kontajnera; flex-end na zarovnanie položiek na pravú stranu; stred zarovnaný so stredom; medzera medzi položkami tak, aby boli medzi nimi zarovnané rovnaké vzdialenosti, pričom prvá a posledná položka sú zarovnané s okrajmi nádoby; a priestor okolo, aby sa ohybná položka zarovnala s rovnakým rozstupom okolo nich, vrátane prvej a poslednej položky. Flex-start je predvolená hodnota.
-
Align-items
Táto vlastnosť má päť hodnôt: napnúť na zväčšenie ohybných položiek tak, aby vyplnili celú šírku alebo výšku od priečneho začiatku po priečny koniec kontajnera; flex-start na stohovanie predmetov na krížovom začiatku; flex-end na stohovanie predmetov na priečnom konci; stred pre zarovnanie položiek na stred priečnej osi; a základnú líniu na zarovnanie položiek tak, aby ich základné línie boli zarovnané. Stretch je predvolená hodnota.
-
Align-content
Táto vlastnosť zarovnáva línie ohybného kontajnera, keď je v priečnej osi ďalší priestor. Jeho hodnoty sú: úsek na rozdelenie priestoru po každom riadku; flex-start na stohovanie predmetov smerom k krížovému štartu; flex-end na stohovanie predmetov smerom k cross-end; stred pre stohovanie predmetov v strede priečnej osi; priestor okolo dokážu rovnomerne rozdeliť priestor okolo predmetov flex. Predvolená hodnota je stretch.
Vlastnosti Flexboxu - Vlastnosti Flex položky
Teraz, keď viete o vlastnostiach kontajnera Flexbox, pozrime sa na vlastnosti položky:
- objednať
Táto vlastnosť riadi poradie vzhľadu detí flex nádoby. Štandardne sú zoradené v rámci flexibilného kontajnera.
.flex-item (
objednať: ;
)
Položky flex môžete zmeniť, bez toho, aby ste museli reštrukturalizovať HTML kód. Predvolená hodnota je nula.
- Align-self
Táto vlastnosť umožňuje prepísať predvolené zarovnanie konkrétnej položky flex. Pre túto vlastnosť môžete použiť hodnoty z zarovnaných položiek.
.flex-item (
Zarovnať samostatne: auto | flex-start | flex-end | centrum základná línia pretiahnuť;
)
Automatická hodnota v zarovnaní sa vypočíta podľa hodnoty položiek zarovnania na nadradenom prvku. Ak prvok nemá rodiča, použije sa namiesto toho úsek.
Základné príklady
To je všetko, čo potrebujete vedieť, aby ste mohli používať rozloženie mriežky CSS Flexbox. Teraz je čas precvičiť to, čo ste sa naučili. Tu je niekoľko príkladov, ktoré ukazujú, ako sa všetky tieto vlastnosti spájajú. Začnime s niečím úplne jednoduchým:
.parent (
displej: flex;
výška: 300px;
)
.child (
šírka: 100px;
výška: 100px;
marža: auto;
)
Toto je príklad dokonalého centrovania. Hodnoty výšky a šírky sa dajú meniť podľa vášho želania. Kľúčom je nastavenie okraja na „auto“, aby flexibilný kontajner automaticky absorboval akýkoľvek ďalší priestor. Je to dosť jednoduché!
Teraz prejdeme k pridaniu ďalších vlastností: zoznam so šiestimi položkami s pevnými rozmermi, ktoré je možné automaticky upravovať. Musia byť rovnomerne rozdelené do vodorovnej osi.
.flex-container (
displej: flex;
justify-content: space-around;
)
Ďalej sa pokúsime vycentrovať navigáciu orientovanú doprava pre stredne veľké obrazovky a urobiť ju jednoduchým stĺpcom na malých zariadeniach.
/* Veľký */
.navigation (
displej: flex;
flex-flow: zábal riadku;
obsah odôvodnenia: flex-end;
)
/ * Stredné obrazovky * /
@media all a (max-width: 800px) (
.navigation (
justify-content: space-around;
)
)
/ * Malé obrazovky * /
@media all a (max-width: 500px) (
.navigation (
smer flex: stĺpec;
)
)
Je čas urobiť tento krok ďalej! Vyskúšajte rozloženie prvého mobilu s tromi stĺpcami, s pätou a hlavičkou plnej šírky a nezávislými od poradia zdrojov.
.wrapper (
displej: flex;
flex-flow: zábal riadku;
)
/ * Hovoríme, že všetky položky majú šírku 100% * /
.header, .ain, .nav, .aside, .footer (
flex: 1 100%;
)
/ * Spoliehame sa na objednávku zdroja pre mobilný prvý prístup * /
/ * Stredné obrazovky * /
@media all and (min-width: 600px) (
.aside (flex: 1 auto; )
)
/ * Veľké obrazovky * /
@media all and (min-width: 800px) (
.main (flex: 2 0px; )
.aside-1 (rád: 1; )
.main (order: 2; )
.aside-2 (rád: 3; )
.footer (poradie: 4; )
)
záver
Toto sú len niektoré základné príklady. S rozložením mriežky CSS Flexbox si môžete zahrať oveľa viac a sú absolútne neoceniteľné, ak chcete vytvoriť responzívnu webovú stránku.
Odporúčané články
Tu je niekoľko článkov, ktoré vám pomôžu získať viac podrobností o vlastnostiach flexboxu, kóde flexboxu a tiež o mriežke css flexboxu, takže stačí prejsť na odkaz, ktorý je uvedený nižšie.
- HTML vs XML - najväčšie rozdiely
- CSS3 vs CSS - Ako sa líšia? (Infograph)
- Najčastejšie rozdiely medzi HTML a CSS
- HTML5 verzus Flash