Komplexné rozloženia pomocou príkladov flex css. Flexbox niekoľko užitočných príkladov na prácu

V tomto článku sa pozrieme na 5 techník, ktoré riešia hlavné problémy s rozložením CSS. Zahrnuli sme aj niekoľko praktických príkladov z reálnych projektov, ktoré názorne ukazujú, ako sa dajú tieto techniky použiť.

Vytváranie stĺpcov s rovnakou výškou

Na prvý pohľad to môže vyzerať celkom jednoducho, ale táto úloha môže byť niekedy otravná. Použitie minimálnej výšky nebude fungovať, pretože akonáhle sa objaví nejaký obsah, veľkosť stĺpcov sa okamžite začne meniť.

Riešenie tohto problému pomocou flexboxu tiež nie je riešením, pretože stĺpce vytvorené pomocou flexbox CSS budú mať spočiatku rovnakú dĺžku. Potrebujeme len zaviesť „flexibilný“ model a potom sa uistiť, že vlastnosti flex-direction a align-items sú nastavené správne.

.container ( display: flex; /* Inicializácia modelu flex */ /* Toto sú predvolené hodnoty, ale stále ich môžete zmeniť */ flex-direction: row; /* Položky v kontajneri budú umiestnené horizontálne */ zarovnať -items : stretch; /* Prvky vo vnútri kontajnera budú natiahnuté po celej svojej výške */ )

Preusporiadanie prvkov

Kedysi v minulosti bola dynamická zmena poradia určitých prvkov úlohou, ktorú zvládol iba JavaScript. Ale s príchodom flexboxu už tento problém nevzniká, pretože riešenie spočíva len v jednej vlastnosti CSS.

Vlastnosť objednávky, ktorá umožňuje použitie rozloženia flexboxu, hovorí sama za seba. Umožňuje nám meniť ľubovoľný počet „flexibilných“ prvkov a ich postupnosť. Jediným parametrom tejto vlastnosti je celé číslo, ktoré určuje pozíciu tohto prvku, čím väčšie číslo, tým vyššia priorita tohto prvku.

.container( display: flex; ) /* Priorita zostupného čísla */ .blue( poradie: 3; ) .red( poradie: 2; ) .green( poradie: 1; )

Vlastnosť objednávky má mnohoraké využitie. Ak chcete vidieť niektoré z nich, môžete sa pozrieť na tento, kde používame túto techniku ​​na vytvorenie responzívnej sekcie komentárov.

Horizontálne a vertikálne centrovanie

Zarovnanie v CSS je stále dosť veľký problém. Aj keď sa obrátite na vyhľadávač, vráti množstvo riešení, z ktorých väčšina navrhne použitie tabuliek a transformácií, čo nie je úplne vhodné, ak hovoríme o adaptívnom rozložení.

Jednoduchým riešením by bolo rozloženie flexboxu, pomocou ktorého možno prvky jednoducho presúvať pozdĺž súradnicovej roviny a zarovnať ich tak, ako chcete.

.container( display: flex; /* Vycentrované okolo hlavnej osi */ justify-content: center; /* Vycentrované okolo vedľajšej osi */ align-items: center; )

Ak chcete vidieť toto riešenie v praxi a dozvedieť sa o ňom viac, prejdite na stránku , ktorá je v rovnakej téme.

Vytváranie plne citlivých mriežok

Mnoho webmasterov sa pri vytváraní responzívnych mriežok spolieha na rôzne knižnice CSS a rámce. Najbežnejším nástrojom v tejto oblasti je Bootstrap. Nie je však jediný svojho druhu. Podobných pomocníkov už boli vyvinuté stovky. Všetky fungujú relatívne dobre a pýšia sa pôsobivou škálou možností, no nikdy sa nezbavia jedného problému – ťažkopádnosti. Preto, ak ste človek, ktorý rád robí všetko sám, alebo jednoducho nechcete inštalovať celý rámec kvôli mriežke, potom vám rozloženie flexboxu pomôže!

Riadok v mriežke flexboxu je len kontajner. Vodorovné stĺpce vo vnútri môžu byť ľubovoľné množstvo prvkov, ktorých veľkosť sa nastavuje pomocou flex . Tento model sa prispôsobí akejkoľvek veľkosti obrazovky, takže konečný výsledok by mal vyzerať dobre na väčšine zariadení. Ak sa však rozhodneme, že na obrazovke nie je dostatok horizontálneho priestoru, potom je možné rozloženie jednoducho previesť na vertikálne pomocou mediálneho dopytu.

.container( display: flex; ) /* Triedy pre každý stĺpec s veľkosťou. */ .col-1( flex: 1; ) .col-2( flex: 2; ) @media (max-width: 800px)( .container( /* Zmeňte horizontálny objekt na vertikálny. */ flex- smer: stĺpec ;)

Variabilitu tejto techniky si môžete pozrieť v návode: Najjednoduchší spôsob tvorby.

Vytvorenie pevnej päty

Aj na tento problém má Flexbox CSS jednoduché riešenie. Vytvorením stránky, ktorá obsahuje lepiacu pätu napísanú cez flexibilné prvky, už nebude potrebné premýšľať nad tým, že by sa mohla posunúť.

Použitie displeja: flex na značku tela nám umožní používať „režim flex“ v celom rozložení. Keď je všetko pripravené, hlavnou časťou stránky bude jeden „flexibilný“ prvok a päta druhým, čo zjednoduší manipuláciu s ich pozíciami.

html( výška: 100%; ) body( display: flex; flex-direction: column; height: 100%; ) .main( /* Hlavná sekcia vyplní všetko dostupné voľné miesto na strane, ktorá nie je obsadená pätou */ flex: 1 0 auto; ) footer( /* Päta pridelí presne toľko miesta, koľko potrebuje, a ani o pixel viac */ flex: 0 0 auto; )

Viac informácií o tejto technike nájdete v článku „“.

Záver

Väčšina prehliadačov dnes podporuje flexibilný režim rozloženia, čo znamená, že môžeme s istotou povedať, že flexbox je pripravený pomôcť mnohým vývojárom.

Dúfam, že vám tento článok pomohol a zlepšili ste svoje znalosti CSS. Veľa štastia!

CSS flexbox (Modul flexibilného rozloženia krabice)- modul flexibilného usporiadania kontajnera - je spôsob usporiadania prvkov založený na myšlienke osi.

Flexbox pozostáva z flexibilná nádoba A flexibilné položky. Flexibilné prvky môžu byť usporiadané v rade alebo stĺpci a zostávajúci voľný priestor je medzi nimi rozdelený rôznymi spôsobmi.

Modul flexbox vám umožňuje riešiť nasledujúce úlohy:

• Usporiadajte prvky v jednom zo štyroch smerov: zľava doprava, sprava doľava, zhora nadol alebo zdola nahor.
• Prepísať poradie zobrazenia prvkov.
• Automaticky upravte veľkosť prvkov tak, aby sa zmestili do dostupného priestoru.
• Vyriešte problém s horizontálnym a vertikálnym centrovaním.
• Presuňte položky do kontajnera bez toho, aby ste ho preplnili.
• Vytvorte stĺpce rovnakej výšky.
• Vytvorenie stlačené na spodok stránky.

Flexbox rieši špecifické problémy - vytváranie jednorozmerných rozložení, napríklad navigačnej lišty, pretože prvky Flex možno umiestniť iba pozdĺž jednej z osí.

Zoznam aktuálnych problémov s modulmi a ich riešení v rôznych prehliadačoch si môžete prečítať v článku Philipa Waltona.

Čo je flexbox

Podpora prehliadača

IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Chrome: 29,0, 21,0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Prehliadač Android: 4.4, 4.1 -webkit-
Chrome pre Android: 44

1. Základné pojmy

Ryža. 1. Model Flexbox

Na popis modulu Flexbox sa používa špecifický súbor výrazov. Hodnota flex-flow a režim záznamu určujú zhodu týchto pojmov s fyzickými smermi: hore / vpravo / dole / vľavo, osi: vertikálna / horizontálna a rozmery: šírka / výška.

Hlavná os— os, pozdĺž ktorej sú rozmiestnené ohybné prvky. Presahuje do hlavnej dimenzie.

Hlavný začiatok a hlavný koniec— čiary, ktoré definujú začiatočnú a koncovú stranu ohybného kontajnera, vzhľadom na ktoré sú ohybné prvky rozmiestnené (začínajúc od hlavného začiatku smerom k hlavnému koncu).

Hlavná veľkosť) - šírka alebo výška ohybného kontajnera alebo ohybných predmetov, v závislosti od toho, ktorý z nich je v hlavnom rozmere, určuje hlavnú veľkosť ohybného kontajnera alebo ohybného predmetu.

Krížová os- os kolmá na hlavnú os. Rozprestiera sa v priečnom rozmere.

Krížový začiatok a krížový koniec— čiary, ktoré definujú začiatočnú a koncovú stranu priečnej osi, vzhľadom na ktorú sú rozmiestnené ohybné prvky.

Veľkosť kríža— šírka alebo výška ohybnej nádoby alebo ohybných predmetov, podľa toho, čo je v priečnom rozmere, je ich priečnym rozmerom.

Ryža. 2. Riadkový a stĺpcový režim

2. Flex nádoba

Kontajner Flex nastavuje nový flexibilný kontext formátovania pre svoj obsah. Flex kontajner nie je blokový kontajner, takže vlastnosti CSS ako float , clear , vertical-align nefungujú pre podradené prvky. Na flexibilný kontajner nemajú vplyv ani vlastnosti column-*, ktoré vytvárajú stĺpce v texte, a pseudoprvky::first-line a::first-letter .

Model rozloženia flexboxu je spojený s určitú hodnotu CSS zobrazuje vlastnosti nadradeného prvku HTML obsahujúceho podradené bloky. Ak chcete ovládať prvky pomocou tohto modelu, musíte nastaviť vlastnosť zobrazenia nasledovne:

Flex-container ( /*generuje flexibilný kontajner na úrovni bloku*/ display: -webkit-flex; display: flex; ) .flex-container ( /*generuje flexibilný kontajner na úrovni riadkov*/ display: -webkit-inline- flex; displej: inline-flex; )

Po nastavení týchto hodnôt vlastností sa každý podriadený prvok automaticky stane flexibilným prvkom, ktorý sa zoradí do jedného radu (pozdĺž hlavnej osi). V tomto prípade sa blokové a vnorené podradené prvky správajú rovnako, t.j. Šírka blokov sa rovná šírke ich obsahu, berúc do úvahy vnútorné okraje a okraje prvku.

Ryža. 3. Zarovnanie prvkov v modeli flexboxu

Ak nadradený blok obsahuje text alebo obrázky bez obalov, stanú sa anonymnými flexibilnými položkami. Text sa zarovná k hornému okraju kontajnerového bloku a výška obrázka sa rovná výške bloku, t.j. je deformovaný.

3. Flex prvky

Položky Flex sú bloky, ktoré predstavujú obsah nádoby Flex v toku. Kontajner Flex vytvára pre svoj obsah nový kontext formátovania, ktorý spôsobuje nasledujúce funkcie:

• Pre flexibilné položky je ich hodnota vlastnosti zobrazenia uzamknutá. Zobrazená hodnota: inline-block; a zobrazenie: tabuľka-bunka; vyhodnotené na displeji: blok; .
• Biele miesto medzi položkami zmizne: nestane sa vlastnou flexibilnou položkou, aj keď je medzipoložkový text zabalený do anonymnej flexibilnej položky. Obsah anonymnej flexibilnej položky nemožno upravovať, ale zdedí štýly (napríklad možnosti písma) z kontajnera Flex.
• Absolútne umiestnený ohybný prvok sa nezúčastňuje na rozložení flex.
• Okraje susedných ohybných prvkov sa nezrútia.
• Hodnoty percentuálneho rozpätia a výplne sa vypočítajú z vnútornej veľkosti bloku, ktorý ich obsahuje.
• okraj: auto; expandovať a absorbovať ďalší priestor v zodpovedajúcej dimenzii. Môžu sa použiť na zarovnanie alebo zatlačenie susedných ohybných predmetov.
• Auto minimálna veľkosť flex položky predvolene na minimálnu veľkosť ich obsahu, t. j. min-width: auto; . Pre rolovacie kontajnery je automatická minimálna veľkosť zvyčajne nula.

4. Flexibilné poradie zobrazenia položky a jej orientácia

Obsah flex kontajnera môže byť rozložený v akomkoľvek smere a v akomkoľvek poradí (zmena usporiadania flex predmetov v kontajneri ovplyvňuje len vizuálne zobrazenie).

4.1. Smer hlavnej osi: smer ohybu

Vlastnosť sa vzťahuje na flex kontajner. Riadi smer hlavnej osi, pozdĺž ktorej sú ohybné predmety položené, v súlade s súčasný režim záznamy. Nezdedené.

flex-direction
Hodnoty:
riadok	Predvolená hodnota je zľava doprava (v rtl, sprava doľava). Flex prvky sú usporiadané v rade. Začiatok (main-start) a koniec (main-end) smeru hlavnej osi zodpovedá začiatku (inline-start) a konci (inline-end) osi priamky (inline-axis).
riadok-spätne	Smer je sprava doľava (v rtl zľava doprava). Flex prvky sú usporiadané v línii vzhľadom k pravému okraju nádoby (v rtl - vľavo).
stĺpec	Smer zhora nadol. Flex prvky sú usporiadané v stĺpci.
stĺpec-spätne	Stĺpec s prvkami v opačnom poradí zdola nahor.
počiatočné
dediť

Ryža. 4. Vlastnosť Flex-direction pre jazyky písané zľava doprava

Syntax

Flex-kontajner ( displej: -webkit-flex; -webkit-flex-direction: rad-reverzný; displej: flex; flex-direction: rad-reverzný; )

4.2. Manažment viacriadkového flex kontajnera: flex-wrap

Vlastnosť určuje, či bude flex kontajner jednoradový alebo viacriadkový, a tiež nastaví smer krížovej osi, ktorá určuje smer, v ktorom budú položené nové línie flex kontajnera.

V predvolenom nastavení sú flexibilné položky naskladané na jednom riadku pozdĺž hlavnej osi. Ak pretečú, budú presahovať ohraničujúci box flex kontajnera. Nehnuteľnosť sa nededí.

Ryža. 5. Viacriadkové ovládanie pomocou vlastnosti flex-wrap pre jazyky LTR

Syntax

Flex-kontajner ( displej: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; )

4.3. Krátke zhrnutie smeru a viacriadkov: flex-flow

Táto vlastnosť vám umožňuje definovať smer hlavnej a priečnej osi, ako aj možnosť presunúť ohybné prvky, ak je to potrebné, na niekoľko línií. Toto je skratka pre vlastnosti flex-direction a flex-wrap. Predvolená hodnota flex-flow: row nowrap; . nehnuteľnosť sa nededí.

Syntax

Flex-kontajner ( displej: -webkit-flex; -webkit-flex-flow: obtekanie riadkov; displej: flex; flex-flow: obtekanie riadkov; )

4.4. Zobraziť poradie flexibilných položiek: objednávka

Vlastnosť definuje poradie, v ktorom sú flexibilné položky zobrazené a usporiadané v rámci flexibilného kontajnera. Platí pre flexibilné položky. Nehnuteľnosť sa nededí.

Na začiatku majú všetky flexibilné položky poradie: 0; . Keď pre prvok zadáte hodnotu -1, presunie sa na začiatok časovej osi a hodnota 1 sa presunie na koniec. Ak má viacero flexibilných položiek rovnakú hodnotu objednávky, budú vykreslené podľa pôvodnej objednávky.

Syntax

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-order: 1; order: 1; )
Ryža. 6. Zobrazte poradie flexibilných položiek

5. Flexibilita flex prvkov

Definujúcim aspektom flexibilného rozloženia je schopnosť „ohýbať“ položky, meniť ich šírku/výšku (v závislosti od veľkosti na hlavnej osi), aby sa vyplnil dostupný priestor v hlavnom rozmere. To sa vykonáva pomocou vlastnosti flex. Ohybná nádoba rozdeľuje voľný priestor medzi svoje deti (úmerné ich pomeru ohybu a rastu), aby naplnila nádobu, alebo ich zmrští (úmerne ich pomeru ohybu a zmrštenia), aby sa zabránilo pretečeniu.

Ohybný prvok bude úplne „neflexibilný“, ak jeho hodnoty flex-grow a flex-zmršťovania sú nulové, a v opačnom prípade „flexibilné“.

5.1. Nastavenie flexibilných rozmerov s jednou vlastnosťou: flex

Táto vlastnosť je skratka pre vlastnosti flex-grow, flex-shrink a flex-base. Predvolená hodnota: flex: 0 1 auto; . Môžete zadať jednu alebo všetky tri hodnoty vlastností. Nehnuteľnosť sa nededí.

Syntax

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )

5.2. Rastový faktor: flex-grow

Táto vlastnosť určuje rýchlosť rastu jedného ohybného prvku v porovnaní s inými ohybnými prvkami v ohybnom kontajneri pri distribúcii pozitívneho voľné miesto. Ak je súčet hodnôt flex-grow flex položiek v rade menší ako 1, zaberajú menej ako 100 % voľného miesta. Nehnuteľnosť sa nededí.

Ryža. 7. Spravujte priestor navigačnej lišty pomocou Flex-Grow

Syntax

Flex-container ( displej: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )

5.3. Kompresný pomer: flex-shrink

Vlastnosť určuje kompresný pomer flexibilnej položky vo vzťahu k iným flexibilným položkám pri distribúcii negatívneho voľného priestoru. Vynásobené veľkosťou základne flex. Záporný priestor je pridelený úmerne tomu, o koľko sa môže položka zmenšiť, takže napríklad malá flexibilná položka sa nezmenší na nulu, kým nebude flexibilná položka zreteľne menšia. väčšia veľkosť. Nehnuteľnosť sa nededí.

Ryža. 8. Zúženie flex položiek v rade

Syntax

Flex-container ( displej: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-shrink: 3; flex-shrink: 3; )

5.4. Základná veľkosť: flex-base

Vlastnosť nastavuje počiatočnú základnú veľkosť flexibilnej položky pred pridelením voľného miesta podľa faktorov flexibility. Pre všetky hodnoty okrem auto a content je základná veľkosť ohybu definovaná rovnako ako šírka v horizontálnych režimoch písania. Percentuálne hodnoty sú definované vo vzťahu k veľkosti flex kontajnera a ak nie je špecifikovaná žiadna veľkosť, hodnota použitá pre flex-základ sú rozmery jeho obsahu. Nezdedené.

Syntax

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px; )

6. Zarovnanie

6.1. Zarovnanie hlavnej osi: zarovnanie obsahu

Táto vlastnosť zarovnáva ohybné predmety pozdĺž hlavnej osi ohybného kontajnera, čím rozdeľuje voľný priestor, ktorý ohybné predmety nezaberajú. Keď sa položka skonvertuje na flexibilný kontajner, flexibilné položky sa predvolene zoskupia (pokiaľ nemajú nastavené okraje). Medzery sa pripočítajú po výpočte hodnôt marže a flex-grow. Ak majú niektoré prvky nenulový ohyb alebo okraj: auto; , majetok nebude mať žiadny vplyv. Nehnuteľnosť sa nededí.

Hodnoty:
flexibilný štart	Predvolená hodnota. Flex prvky sú usporiadané v smere začínajúcom od štartovacej čiary flexibilného kontajnera.
ohybný koniec	Flex položky sú rozložené v smere od koncovej línie flex kontajnera.
centrum	Flex položky sú zarovnané do stredu flexibilnej nádoby.
priestor-medzi	Flex prvky sú rozmiestnené rovnomerne pozdĺž línie. Prvá ohybná položka je umiestnená v jednej rovine s okrajom začiatočnej čiary, posledná ohybná položka je umiestnená v jednej rovine s okrajom koncovej línie a zostávajúce ohybné položky na linke sú rozmiestnené tak, aby vzdialenosť medzi akýmikoľvek dvoma susednými položkami bola rovnaká. rovnaký. Ak je zostávajúce voľné miesto záporné alebo existuje iba jedna flexibilná položka na riadok, táto hodnota je totožná s parametrom flexibilného štartu.
priestor okolo	Flexibilné položky na linke sú rozmiestnené tak, že vzdialenosť medzi akýmikoľvek dvoma susednými ohybnými položkami je rovnaká a vzdialenosť medzi prvými/poslednými ohybnými položkami a okrajmi ohybnej nádoby je polovica vzdialenosti medzi ohybnými položkami.
počiatočné	Nastaví hodnotu vlastnosti na predvolenú hodnotu.
dediť	Zdedí hodnotu vlastnosti z nadradeného prvku.

Ryža. 9. Zarovnanie prvkov a rozdelenie voľného priestoru pomocou vlastnosti justify-content

Syntax

Flex-container ( zobrazenie: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; )

6.2. Zarovnanie naprieč osou: zarovnanie položiek a zarovnanie seba

Flex prvky môžu byť zarovnané pozdĺž priečnej osi aktuálnej línie flexibilného kontajnera. align-items nastavuje zarovnanie pre všetky položky flexibilného kontajnera vrátane anonymných flexibilných položiek. align-self vám umožňuje prepísať toto zarovnanie pre jednotlivé flexibilné položky. Ak je ktorýkoľvek z priečnych okrajov ohybového prvku nastavený na auto , zarovnanie samo nemá žiadny účinok.

6.2.1. Zarovnať položky

Táto vlastnosť zarovnáva ohybné prvky, vrátane anonymných ohybových prvkov, pozdĺž priečnej osi. Nezdedené.

Hodnoty:
flexibilný štart
ohybný koniec
centrum
základná línia	Základné línie všetkých ohybných prvkov zapojených do zarovnania sú rovnaké.
natiahnuť
počiatočné	Nastaví hodnotu vlastnosti na predvolenú hodnotu.
dediť	Zdedí hodnotu vlastnosti z nadradeného prvku.

Ryža. 10. Vertikálne zarovnanie prvkov v nádobe

Syntax

Flex-container ( display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; )

6.2.2. Zarovnať sa

Táto vlastnosť je zodpovedná za zarovnanie jedného ohybného prvku na výšku ohybnej nádoby. Prepíše zarovnanie zadané pomocou align-items . Nezdedené.

Hodnoty:
auto	Predvolená hodnota. Flex prvok používa zarovnanie špecifikované vo vlastnosti align-items kontajnera flex.
flexibilný štart	Horný okraj ohybného prvku je umiestnený vedľa ohybovej čiary (alebo vo vzdialenosti, berúc do úvahy špecifikované okraje a okraje prvku), ktorá prechádza cez začiatok krížovej osi.
ohybný koniec	Spodný okraj ohybného prvku je umiestnený vedľa ohybovej čiary (alebo vo vzdialenosti, berúc do úvahy špecifikované okraje a okraje prvku) prechádzajúcej cez koniec priečnej osi.
centrum	Okraj ohybného prvku je vycentrovaný pozdĺž priečnej osi v rámci ohybovej línie.
základná línia	Ohybný prvok je zarovnaný so základnou čiarou.
natiahnuť	Ak je krížová veľkosť flexibilnej položky automatická a žiadna z hodnôt krížového okraja nie je automatická, položka sa roztiahne. Predvolená hodnota.
počiatočné	Nastaví hodnotu vlastnosti na predvolenú hodnotu.
dediť	Zdedí hodnotu vlastnosti z nadradeného prvku.

Ryža. 11. Zarovnanie jednotlivých flex položiek

Syntax

Flex-container ( display: -webkit-flex; display: flex; ) .flex-item ( -webkit-align-self: center; align-self: center; )

6.3. Zarovnanie čiar ohybnej nádoby: zarovnanie obsahu

Táto vlastnosť zarovnáva riadky vo flexibilnom kontajneri, keď je na krížovej osi viac miesta, podobne ako zarovnanie jednotlivých položiek na hlavnej osi pomocou vlastnosti justify-content. Táto vlastnosť nemá vplyv na jednoriadkový flexibilný kontajner. Nezdedené.

Hodnoty:
flexibilný štart	Riadky sú naskladané smerom k začiatku flex kontajnera. Okraj prvého riadku je umiestnený blízko okraja flex nádoby, každý nasledujúci riadok je umiestnený blízko k predchádzajúcemu riadku.
ohybný koniec	Riadky sú naskladané smerom ku koncu flex kontajnera. Okraj posledného riadku je umiestnený blízko okraja flex nádoby, každý predchádzajúci riadok je umiestnený v blízkosti nasledujúceho riadku.
centrum	Riadky sú naskladané smerom k stredu flex kontajnera. Riadky sú blízko seba a zarovnané so stredom ohybného kontajnera s rovnakou vzdialenosťou medzi počiatočným okrajom obsahu ohybného kontajnera a prvým radom a medzi koncovým okrajom obsahu ohybného kontajnera a posledným radom.
priestor-medzi	Riadky sú rovnomerne rozložené vo flex kontajneri. Ak je zostávajúci voľný priestor záporný alebo ak je v kontajneri Flex iba jedna ohybná čiara, táto hodnota je totožná s hodnotou flex-start . V opačnom prípade sa okraj prvého riadku umiestni blízko začiatočného okraja obsahu ohybného kontajnera a okraj posledného riadku sa umiestni blízko ku koncovému okraju obsahu ohybného kontajnera. Zostávajúce čiary sú rozdelené tak, že vzdialenosť medzi ľubovoľnými dvoma susednými čiarami je rovnaká.
priestor okolo	Čiary sú rovnomerne rozmiestnené vo flexibilnom kontajneri s polovičným priestorom na oboch koncoch. Ak je zostávajúce voľné miesto záporné, táto hodnota je totožná so stredovým stredom . V opačnom prípade sú čiary rozmiestnené tak, že vzdialenosť medzi akýmikoľvek dvoma susednými čiarami je rovnaká a vzdialenosť medzi prvými/poslednými čiarami a okrajmi obsahu ohybnej nádoby je polovičná ako vzdialenosť medzi čiarami.
natiahnuť	Predvolená hodnota. Rad ohybných predmetov sa rovnomerne natiahne, aby vyplnili všetok dostupný priestor. Ak je zostávajúce voľné miesto záporné, táto hodnota je totožná s hodnotou flex-start . V opačnom prípade bude voľný priestor rozdelený rovnomerne medzi všetky riadky, čím sa zväčší ich bočná veľkosť.
počiatočné	Nastaví hodnotu vlastnosti na predvolenú hodnotu.
dediť	Zdedí hodnotu vlastnosti z nadradeného prvku.

Ryža. 12. Viacriadkové zarovnanie ohybných prvkov

Syntax

Flex-container ( display: -webkit-flex; -webkit-flex-flow: riadkový obal; -webkit-align-content: flex-end; display: flex; flex-flow: riadkový obal; align-content: flex-end ; výška: 100px; )

Flexboxy sú ideálne na vytváranie bežne používaných rozložení webových stránok, ako je napríklad rozloženie s tromi stĺpcami, takzvaný „svätý grál“, kde všetky stĺpce musia mať plnú výšku bez ohľadu na ich obsah. Zároveň v zdrojový kód hlavný obsah prichádza pred navigáciou a na samotnej stránke je hlavný obsah po navigácii.

Páči sa ti to.

Čiapka

Pred Flexboxom bolo toto rozloženie pomerne ťažké dosiahnuť bez použitia niektorých hackov. 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 zabezpečili, že všetko bude správne zoradené bez ohľadu na množstvo obsahu alebo veľkosť obrazovky. Ako však ukazuje príklad vyššie, na Flexbox je všetko oveľa jednoduchšie.

Tu je zhrnutie kódu. V tomto príklade urobíme z prvku #main flexibilný kontajner a hlavičku a pätu ponecháme ako prvky 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); )

Stačí použiť display: flex na vytvorenie flex nádoby. Všimnite si, že minimálnu výšku nastavíme aj pomocou funkcie calc() a nastavíme #main na 100 % výšky výrezu mínus výška hlavičky a základne (každý 20vh). To zaisťuje, že rozloženie vyplní celú výšku obrazovky, aj keď je tam 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 pomerne 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 k súčtu pripočítať hodnotu výplne, ktorú by sme mali odpočítať.

Po inštalácii flex kontajnera sa zaoberáme flex prvkami.

#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