Ako vytvoriť rozbaľovaciu ponuku vo flexboxe. Flexbox pre rozhrania: základné vzory

Stručne povedané, rozloženie Flexbox nám poskytuje jednoduché riešenia na kedysi ťažké problémy. Napríklad, keď potrebujete zarovnať prvok vertikálne alebo stlačiť pätu na spodok obrazovky alebo jednoducho vložiť niekoľko blokov do jedného radu tak, aby zaberali celý voľný priestor. Podobné problémy sa dajú vyriešiť bez flex. Spravidla sú však tieto riešenia skôr „barlami“ - technikami používania CSS na iné účely, ako je ich zamýšľaný účel. Zatiaľ čo s flexboxom sú takéto úlohy vyriešené presne tak, ako je zamýšľaný flex model.

Modul CSS Flexible Box Layout (modul CSS pre rozloženia s flexibilnými blokmi), skrátene flexbox, bol vytvorený s cieľom odstrániť nedostatky pri vytváraní širokej škály návrhov HTML vrátane návrhov prispôsobených rôznym šírkam a výškam a urobiť rozloženie logické a jednoduché. . A logický prístup spravidla funguje na neočakávaných miestach, kde výsledok nebol skontrolovaný - logika je všetko!

Flexbox umožňuje elegantne ovládať rôzne parametre prvkov vo vnútri kontajnera: smer, poradie, šírka, výška, pozdĺžne a priečne zarovnanie, rozloženie voľné miesto, napätie a stlačenie prvkov.

Základné znalosti

FlexBox pozostáva z kontajnera a jeho položiek (flexibilných prvkov).

Ak chcete povoliť flexbox, ktokoľvek HTML prvok stačí priradiť vlastnosť CSS display:flex; alebo display:inline-flex; .

Po povolení vlastnosti flex sa vo vnútri kontajnera vytvoria dve osi: hlavná a priečna (kolmá (⊥), krížová os). Všetky vnorené prvky (prvej úrovne) sú zoradené pozdĺž hlavnej osi. Štandardne je hlavná os vodorovná a smeruje zľava doprava (→) a krížová os je zodpovedajúcim spôsobom vertikálna a smeruje zhora nadol (↓).

Hlavná a krížová os sa dajú zameniť, potom budú prvky umiestnené zhora nadol (↓) a keď sa už nezmestia na výšku, budú sa pohybovať zľava doprava (→) - to znamená, že osi si jednoducho vymenili miesta . V tomto prípade sa začiatok a koniec usporiadania prvkov nemení - menia sa iba smery (osi)! To je dôvod, prečo si musíte predstaviť osi vo vnútri nádoby. Netreba si však myslieť, že existujú nejaké „fyzické“ osi a tie niečo ovplyvňujú. Os je tu len smer pohybu prvkov vo vnútri nádoby. Napríklad, ak sme špecifikovali zarovnanie prvkov na stred hlavnej osi a potom zmenili smer tejto hlavnej osi, potom sa zarovnanie zmení: prvky boli v strede horizontálne, ale stali sa v strede vertikálne... Pozrite si príklad.

Ďalšou dôležitou vlastnosťou Flexboxu je prítomnosť radov v priečnom smere. Aby sme pochopili, o čom hovoríme, predstavme si, že existuje hlavná horizontálna os, existuje veľa prvkov a „nezapadnú“ do kontajnera, takže sa presunú do iného radu. Tie. kontajner vyzerá takto: kontajner s dvoma radmi vo vnútri, pričom každý riadok obsahuje niekoľko prvkov. Predstavený? Teraz si pamätajte, že môžeme vertikálne zarovnať nielen prvky, ale aj riadky! Ako to funguje, je jasne vidieť na príklade nehnuteľnosti. A takto to vyzerá schematicky:

CSS vlastnosti, čo môže ovplyvniť model rozloženia: float, clear, vertical-align, stĺpce nefungujú v flex dizajne. Tu sa používa iný model na zostavenie rozloženia a tieto vlastnosti CSS sa jednoducho ignorujú.

Vlastnosti CSS Flexboxu

Flexbox obsahuje rôzne css pravidlá na ovládanie celého flex dizajnu. Niektoré je potrebné aplikovať na hlavný kontajner a iné na prvky tohto kontajnera.

Pre kontajner

zobraziť:

Povolí vlastnosť flex pre prvok. Táto vlastnosť pokrýva samotný prvok a jeho vnorené prvky: ovplyvnení sú iba potomkovia prvej úrovne – stanú sa prvkami flex kontajnera.

flex- prvok sa tiahne po celej šírke a má svoj plný priestor medzi okolitými blokmi. Zalomenie riadkov sa vyskytuje na začiatku a na konci bloku.
inline-flex- prvok je obalený okolo iných prvkov. V tomto prípade je jeho vnútorná časť naformátovaná ako blokový prvok a samotný prvok je naformátovaný ako vložený.

flex a inline-flex sa líšia v tom, že interagujú odlišne s okolitými prvkami, podobne ako display:block a display:inline-block .

ohybový smer:

Mení smer hlavnej osi kontajnera. Podľa toho sa mení aj priečna os.

riadok (predvolené)- smer prvkov zľava doprava (→)
stĺpec- smer prvkov zhora nadol (↓)
riadok-spätne- smer prvkov sprava doľava (←)
stĺpec-spätne- smer prvkov zdola nahor ()

ohybný obal:

Riadi presun prvkov, ktoré sa nezmestia do kontajnera.

nowrap (predvolené)- vnorené prvky sú umiestnené v jednom riadku (s direction=riadok) alebo v jednom stĺpci (s direction=stĺpec) bez ohľadu na to, či sa do kontajnera zmestia alebo nie.
obal- zahŕňa presúvanie prvkov do ďalšieho radu, ak sa nezmestia do kontajnera. To umožňuje pohyb prvkov pozdĺž priečnej osi.
wrap-reverse- to isté ako wrap, len prenos nebude dole, ale hore (v opačnom smere).

flex-flow: smerové zavinutie

Kombinuje vlastnosti flex-direction a flex-wrap. Často sa používajú spolu, takže vlastnosť flex-flow bola vytvorená, aby pomohla písať menej kódu.

flex-flow akceptuje hodnoty týchto dvoch vlastností oddelené medzerou. Alebo môžete zadať jednu hodnotu pre akúkoľvek vlastnosť.

/* len flex-direction */ flex-flow: row; flex-flow: rad-reverzný; flex-flow: kolóna; flex-flow: stĺpcový-reverzný; /* len flex-wrap */ flex-flow: nowrap; flex-flow: zábal; flex-flow: wrap-reverse; /* obe hodnoty naraz: flex-direction a flex-wrap */ flex-flow: row nowrap; flex-flow: obal kolóny; flex-flow: stĺpec-obrátený obal-obrátený; ospravedlniť obsah:

Zarovná prvky pozdĺž hlavnej osi: ak smer=riadok, potom vodorovne a ak smer=stĺpec, potom zvislo.

flexibilný štart (predvolené)- prvky pôjdu od začiatku (na konci môže zostať nejaké miesto).
ohybný koniec- prvky sú zarovnané na konci (medzera zostane na začiatku)
centrum- v strede (priestor zostane vľavo a vpravo)
priestor-medzi- krajné prvky sú pritlačené k okrajom (priestor medzi prvkami je rozložený rovnomerne)
priestor okolo - voľné miesto rozložené rovnomerne medzi prvky (najkrajnejšie prvky nie sú pritlačené k okrajom). Priestor medzi okrajom nádoby a vonkajšími prvkami bude polovičný ako priestor medzi prvkami v strede radu.
priestor-rovnomerne

zarovnať obsah:

Zarovná riadky obsahujúce prvky pozdĺž priečnej osi. Rovnaké ako justify-content len pre opačnú os.

Poznámka: Funguje, keď sú aspoň 2 riadky, t.j. Ak je len 1 riadok, nič sa nestane.

Tie. ak flex-direction: row , potom táto vlastnosť zarovná neviditeľné riadky vertikálne. Tu je dôležité poznamenať, že výška bloku musí byť nastavená pevne a musí byť väčšia ako výška riadkov, inak samotné rady natiahnu nádobu a akékoľvek ich zarovnanie stráca zmysel, pretože medzi nimi nie je voľný priestor. ich... Ale keď flex-direction: column , tak sa riadky pohybujú vodorovne → a šírka kontajnera je takmer vždy väčšia ako šírka riadkov a zarovnanie riadkov hneď dáva zmysel...

natiahnuť (predvolené)- riadky sa natiahnu tak, aby úplne vyplnili riadok
flexibilný štart- riadky sú zoskupené v hornej časti nádoby (na konci môže zostať nejaké miesto).
ohybný koniec- riadky sú zoskupené v spodnej časti kontajnera (na začiatku zostane priestor)
centrum- riadky sú zoskupené v strede kontajnera (pri okrajoch zostane priestor)
priestor-medzi- vonkajšie rady sú pritlačené k okrajom (priestor medzi radmi je rozdelený rovnomerne)
priestor okolo- voľný priestor je rovnomerne rozložený medzi radmi (krajné prvky nie sú pritlačené k okrajom). Priestor medzi okrajom nádoby a vonkajšími prvkami bude polovičný ako priestor medzi prvkami v strede radu.
priestor-rovnomerne- rovnaké ako priestor okolo , len vzdialenosť medzi vonkajšími prvkami a okrajmi nádoby je rovnaká ako medzi prvkami.

zarovnať položky:

Zarovná prvky pozdĺž priečnej osi v rámci radu (neviditeľný riadok). Tie. Samotné riadky sú zarovnané pomocou align-content a prvky v týchto riadkoch (riadky) sú zarovnané pomocou align-items a pozdĺž priečnej osi. Neexistuje žiadne takéto rozdelenie pozdĺž hlavnej osi, neexistuje koncept riadkov a prvky sú zarovnané pomocou justify-content .

natiahnuť (predvolené)- prvky sú natiahnuté, aby úplne vyplnili čiaru
flexibilný štart- prvky sú stlačené na začiatok radu
ohybný koniec- prvky sú stlačené na koniec radu
centrum- prvky sú zarovnané na stred riadku
základná línia- prvky sú zarovnané k základnej čiare textu

Pre kontajnerové prvky

Flex-Grow:

Nastaví faktor zväčšenia prvku, keď je v kontajneri voľné miesto. Predvolený flex-grow: 0 t.j. žiadny z prvkov by nemal rásť a zapĺňať voľný priestor v nádobe.

Predvolený flexibilný rast: 0

Ak zadáte flex-grow:1 pre všetky prvky, potom sa všetky roztiahnu rovnako a vyplnia všetok voľný priestor v kontajneri.
Ak do jedného z prvkov zadáte flex-grow:1, vyplní všetok voľný priestor v kontajneri a zarovnania cez justify-content už nebudú fungovať: nie je voľný priestor na zarovnanie...
S flexibilným rastom: 1. Ak má jeden z nich flex-grow:2, bude 2-krát väčší ako všetky ostatné
Ak majú všetky flex boxy vo vnútri flex kontajnera flex-grow:3, budú mať rovnakú veľkosť
S flexibilným rastom: 3. Ak má jeden z nich flex-grow:12, potom bude 4-krát väčší ako všetky ostatné

Ako to funguje? Povedzme, že kontajner je široký 500 pixelov a obsahuje dva prvky, každý so základnou šírkou 100 pixelov. To znamená, že v kontajneri zostáva 300 voľných pixelov. Teraz, ak zadáme flex-grow:2; a druhý ohybný rast: 1; , potom bloky zaberú celú dostupnú šírku kontajnera a šírka prvého bloku bude 300px a druhého 200px. Vysvetľuje to skutočnosť, že dostupných 300 pixelov voľného miesta v kontajneri bolo rozdelených medzi prvky v pomere 2:1, +200 pixelov pre prvý a +100 pixelov pre druhý.

Poznámka: V hodnote môžete zadať zlomkové čísla, napríklad: 0,5 - flex-grow:0,5

flex-zmrštenie:

Nastavuje redukčný faktor prvku. Vlastnosť je opakom flex-grow a určuje, ako sa má prvok zmenšiť, ak v nádobe nezostane voľné miesto. Tie. vlastnosť začne fungovať, keď je súčet veľkostí všetkých prvkov väčší ako veľkosť kontajnera.

Predvolené flex-zmršťovanie: 1

Povedzme, že kontajner je široký 600px a obsahuje dva prvky, každý so šírkou 300px - flex-basis:300px; . Tie. dva prvky úplne naplnia nádobu. Dajte prvému prvku flex-zmrštenie: 2; a druhé ohybné zmrštenie: 1; . Teraz zmenšíme šírku kontajnera o 300px, t.j. prvky sa musia zmenšiť o 300 pixelov, aby sa zmestili do kontajnera. Budú sa krčiť v pomere 2:1, t.j. prvý blok sa zmenší o 200 pixelov a druhý o 100 pixelov a nové veľkosti prvkov budú 100 pixelov a 200 pixelov.

Poznámka: V hodnote môžete zadať zlomkové čísla, napríklad: 0,5 - flex-shrink:0,5

flexibilný základ:

Nastavuje základnú šírku prvku – šírku pred vypočítaním ostatných podmienok ovplyvňujúcich šírku prvku. Hodnota môže byť špecifikovaná v px, em, rem, %, vw, vh atď. Konečná šírka bude závisieť od základnej šírky a hodnôt flex-grow, flex-shrink a obsahu vo vnútri bloku. Pri automatickom nastavení získa prvok základnú šírku vzhľadom na obsah v ňom.

Predvolené: auto

Niekedy je lepšie nastaviť šírku prvku natvrdo prostredníctvom obvyklej vlastnosti width. Napríklad šírka: 50 %; bude znamenať, že prvok vo vnútri nádoby bude presne 50 %, ale vlastnosti flex-rast a flex-zmršťovanie budú stále fungovať. To môže byť potrebné, keď je prvok natiahnutý obsahom v ňom viac, ako je uvedené v flex-base. Príklad.

flex-basis bude „tuhý“, ak je roztiahnutie a zmrštenie nastavené na nulu: flex-basis:200px; flex-rast:0; flex-zmrštenie:0; . Toto všetko sa dá napísať takto: flex:0 0 200px; .

flex: (základ rastu a zmršťovania)

Krátky súhrn troch vlastností: flex-grow flex-shrink flex-base .

Predvolené: flex: 0 1 auto

Môžete však zadať jednu alebo dve hodnoty:

Flex: žiadny; /* 0 0 auto */ /* číslo */ flex: 2; /* flex-grow (flex-základ ide na 0) */ /* nie číslo */ flex: 10em; /* flex-base: 10em */ flex: 30px; /* flex-base: 30px */ flex: auto; /* flex-base: auto */ flex: content; /* flex-base: content */ flex: 1 30px; /* flex-grow a flex-base */ flex: 2 2; /* flex-rast a flex-zmršťovanie (flex-základ ide na 0) */ flex: 2 2 10 %; /* flex-grow a flex-shrink a flex-base */ align-self:

Umožňuje zmeniť vlastnosť align-items iba pre jeden prvok.

Predvolené: z kontajnera align-items

natiahnuť- prvok je natiahnutý, aby úplne vyplnil čiaru
flexibilný štart- prvok je stlačený na začiatok riadku
ohybný koniec- prvok je stlačený na koniec riadku
centrum- prvok je zarovnaný na stred čiary

základná línia- prvok je zarovnaný k základnej čiare textu

objednať:

Umožňuje zmeniť poradie (pozíciu, pozíciu) prvku vo všeobecnom riadku.

Predvolené: poradie: 0

V predvolenom nastavení majú prvky poradie: 0 a sú umiestnené v poradí, v akom sa zobrazujú v kóde HTML a v smere riadku. Ak však zmeníte hodnotu vlastnosti objednávky, prvky budú usporiadané v poradí hodnôt: -1 0 1 2 3 ... . Ak napríklad zadáte poradie: 1 pre jeden z prvkov, potom budú najskôr všetky nuly a potom prvok s 1.

Týmto spôsobom môžete napríklad presunúť prvý prvok na koniec bez toho, aby ste zmenili smer pohybu zvyšných prvkov alebo kódu HTML.

Poznámky

Aký je rozdiel medzi flex-base a šírkou?

Nižšie sú uvedené dôležité rozdiely medzi základňou flex a šírkou/výškou:

flex-base funguje len pre hlavnú os. To znamená, že s flex-direction:row flex-basis riadi šírku a s flex-direction:column riadi výšku. .

flex-base sa vzťahuje len na flex prvky. To znamená, že ak zakážete flex pre kontajner, táto vlastnosť nebude mať žiadny účinok.

Absolútne prvky kontajnera sa nezúčastňujú na ohybnej konštrukcii... To znamená, že základ flex neovplyvňuje ohybné prvky kontajnera, ak sú absolútna poloha:absolútna . Budú musieť špecifikovať šírku/výšku.

Pri použití vlastnosti flex je možné kombinovať 3 hodnoty (flex-grow/flex-shrink/flex-basis) a krátko zapísať, ale pre rast šírky alebo zmršťovanie je potrebné písať samostatne. Napríklad: flex:0 0 50% == šírka:50%; flex-zmrštenie:0; . Niekedy je to jednoducho nepohodlné.

Ak je to možné, uprednostňujte flex-základ. Šírku použite len vtedy, keď flex-báza nie je vhodná.

Rozdiel medzi flex-base a šírkou - chyba alebo funkcia?

Obsah vo vnútri flexibilného prvku ho tlačí a nemôže ho prekročiť. Ak však nastavíte šírku pomocou šírky alebo maximálnej šírky namiesto flex-basis , prvok vo flex kontajneri bude môcť presahovať hranice tohto kontajnera (niekedy je to presne to správanie, ktoré chcete). Príklad:

Príklady rozloženia Flex

Nikde v príkladoch nie sú použité predpony pre kompatibilitu medzi prehliadačmi. Urobil som to pre ľahké čítanie css. Pozrite si preto príklady v najnovšom Verzie Chrome alebo Firefox.

#1 Jednoduchý príklad s vertikálnym a horizontálnym zarovnaním

Začnime od úplného začiatku jednoduchý príklad- vertikálne a horizontálne zarovnanie súčasne a v akejkoľvek výške bloku, dokonca aj gumy.

Text v strede

Alebo takto, bez bloku vo vnútri:

Text v strede

#1.2 Oddelenie (prerušenie) medzi prvkami flex bloku

Ak chcete umiestniť prvky kontajnera pozdĺž okrajov a náhodne vybrať prvok, po ktorom bude prestávka, musíte použiť vlastnosť margin-left:auto alebo margin-right:auto.

#2 Adaptívne menu na flex

Vytvorme menu úplne hore na stránke. Na širokouhlej obrazovke by mal byť vpravo. V priemere zarovnajte na stred. A na malom musí byť každý prvok na novom riadku.

Úvod O nás Produkty Kontakty

#3 Adaptívne 3 stĺpce

Tento príklad ukazuje, ako rýchlo a pohodlne vytvoriť 3 stĺpce, ktoré sa po zúžení zmenia na 2 a potom na 1.

Upozorňujeme, že to možno urobiť bez použitia pravidiel pre médiá, všetko je flexibilné.

Prejdite na stránku jsfiddle.net a zmeňte šírku sekcie „výsledok“.

#4 Adaptívne bloky na flexe

Povedzme, že potrebujeme vytlačiť 3 bloky, jeden veľký a dva malé. Zároveň je potrebné, aby sa bloky prispôsobili malým obrazovkám. Robíme:

Prejdite na stránku jsfiddle.net a zmeňte šírku sekcie „výsledok“.

#5 Galéria s ohybom a prechodom

Tento príklad ukazuje, ako rýchlo môžete pomocou flexu vyrobiť roztomilý akordeón s obrázkami. Venujte pozornosť vlastnosti prechodu pre flex.

#6 Flex to Flex (len príklad)

Úlohou je vytvoriť flexibilný blok. Tak, aby začiatok textu v každom bloku bol na rovnakom riadku vodorovne. Tie. Keď sa šírka zužuje, bloky rastú do výšky. Je potrebné, aby bol obrázok hore, tlačidlo vždy dole a text v strede začínal pozdĺž jednej vodorovnej čiary...

Na vyriešenie tohto problému sú samotné bloky natiahnuté flexom a nastavené na maximálnu možnú šírku. Každý vnútorný blok je tiež flexibilná štruktúra s rotovanou osou flex-direction:stĺpec; a prvok v strede (kde je text) je natiahnutý flex-grow:1; aby sa zaplnil všetok voľný priestor, takto sa dosiahne výsledok - text začínal jedným riadkom...

Viac príkladov

Podpora prehliadača – 98,3 %

Samozrejme tam nie je plná podpora, ale všetko moderné prehliadače podpora dizajnov flexboxov. Niektoré stále vyžadujú predpony. Pre reálny obraz sa pozrime na caniuse.com a uvidíme, že 96,3 % prehliadačov, ktoré sa dnes používajú, bude fungovať bez predpony, pričom 98,3 % používa predpony. Toto je vynikajúci indikátor na spoľahlivé používanie flexboxu.

Ak chcete vedieť, ktoré predpony sú dnes (jún 2019) relevantné, uvediem príklad všetkých pravidiel flex s s potrebnými predponami:

/* Kontajner */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: distribute; align-content:space-around; ) /* Elements */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negatívny:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-base:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

Je lepšie, ak vlastnosti s predponami idú pred pôvodnú vlastnosť.
Tento zoznam neobsahuje dnes už zbytočné prefixy (podľa caniuse), ale vo všeobecnosti je prefixov viac.

Chrome	Safari	Firefox	Opera	I.E.	Android	iOS
20- (starý)	3.1+ (staré)	2-21 (staré)		10 (tweener)	2.1+ (staré)	3.2+ (staré)
21+ (nové)	6.1+ (nové)	22+ (nové)	12.1+ (nové)	11+ (nové)	4.4+ (nové)	7.1+ (nové)

(nové) - nová syntax: display: flex; .
(tweener) - stará neoficiálna syntax z roku 2011: display: flexbox; .
(staré) - stará syntax z roku 2009: display: box;

Video

No, nezabudnite na video, niekedy je tiež zaujímavé a zrozumiteľné. Tu je niekoľko populárnych:

Užitočné odkazy na Flex

flexboxfroggy.com - vzdelávacia hra flexbox.

Flexplorer je vizuálny tvorca flexibilného kódu.

V tomto čísle to urobíme horizontálne menu s efektom vznášať sa. Prepojme ikony fontov, povoľme režim prelínania vrstiev pomocou mix-blend-mode: multiply, použite pseudotriedy :hover a zoznámime sa s desplay:flax, všetko v čistom CSS3.

Ponuka drôtového modelu v HTML

Stiahnite si archív do počítača a rozbaľte ho. Obsahuje tri priečinky, css kde sa nachádzajú súbory štýlov, priečinok fonts s ikonami, img je v ňom obrázok pozadie.

Presuňte všetko do svojho vývojového prostredia, kde pracujete. Celý kód napíšem v phpstorme. Skopírujem do nej všetky priečinky a súbory, otvorím index.html a začneme popisovať rám ponuky.

Píšeme značku tela

, v ňom napíšeme div s triedou .dws-menu, potom ul s triedou .dws-ul, potom päť zoznamov li s triedou .dws-li. Do zoznamov dáme odkaz, potom ja s triedou .fa a triedou fa- kde napíšeme názov ikon, potom atribút aria-hidden=”true” , klikneme na použiť.

Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-

Názov ikony:

nákupný vozík
server
priečinok otvorený
noviny-o

CSS štýl

Po vytvorení značky pristúpime k stylingu. Otvorte style.css v tele a nastavte pozadie a písmo Verdana.

Body( background-image: url("../img/escheresque_ste.png"); rodina fontov: Verdana; )

Bloku s ponukou dáme pozadie a hornú časť odsadíme o 100 pixelov. a šírku, aby vyplnil celú obrazovku.

Dws-menu( farba pozadia: biela; horný okraj: 100 pixelov; šírka: 100 %; )

V blokoch Ul zoradíme zoznamy vodorovne pomocou desplay:flax , odstránime výplň a vycentrujeme naše prvky pomocou justify-content:center .

Ul.dws-ul( display: flex; padding: 0; justify-content: center; )

Odstránime značku zo zoznamov LI a odsadíme ich na všetkých stranách o 10 vrcholov.

Li.dws-li ( štýl zoznamu: žiadny; výplň: 10px; )

Odstráňte podčiarknutie z odkazov a zväčšite text na 18 pixelov. a urobiť to čierne.

Li.dws-li a( text-decoration: none; font-size: 18px; color: #000; )

Posuňte ikonu trochu doprava pomocou margin-right:10px .

Li.dws-li a i( pravý okraj: 10px; )

Animácia po umiestnení kurzora myši

Potom, čo sme urobili základný dizajn, prejdime k animácii vznášania.

Vytvorme ďalšie pseudo prvky, ktoré pri umiestnení kurzora myši zvýraznia názov prvku.

Popíšeme si ľavú stranu, vyberieme odkazy a priradíme im pseudoprvok li.dws-li a::before , napíšte prázdny obsah:’’; , šírka 20 obrázkov. a výška 3 vrcholov. dosť. Nastavíme farbu a aby sa blok objavil, priraďme pozíciu: relatívne k odkazom; a umiestnite ho úplne k spojkám, spustite ho úplne dole a zatlačte na ľavý okraj.

Li.dws-li a( ... pozícia: relatívna; ) li.dws-li a::pred( ... pozícia: absolútna; hore: 100 %; vľavo: 0; )

Duplikujte tento blok a priraďte mu pseudoprvok ::after. Zmeňte ľavý parameter na pravý , vyberte inú farbu #ff2117 .

Li.dws-li a::after( content: ""; šírka: 20px; výška: 3px; farba pozadia: #ff2117; pozícia: absolútna; hore: 100 %; vpravo: 0; )

Potom urobíme animáciu vznášania. Vyberte li a dajte im trochu tmavšie pozadie.

Li.dws-li:hover( farba pozadia: #e5eae8; )

Ak to chcete urobiť, vyberte zoznamy pri umiestnení kurzora myši a pridajte k nim pseudoprvok so šírkou 50% a nastavte transformáciu pozdĺž osi X zľava doprava. To jej dá pohyb.

Li.dws-li:hover a:before( width: 50%; transform: translateX(100%); )

To isté zopakujeme pre pseudoprvok ::after, len teraz nastavíme pohyb sprava doľava.

Li.dws-li:hover a:after( šírka: 50 %; transformácia: translateX(-100 %); )

Li.dws-li a::before( ... prechod: .5s; režim zmiešavania: násobenie; ) li.dws-li a::after( ... prechod: .5s; režim zmiešavania : množiť ;)

Dopadlo to celkom dobre, teraz nastavíme šírku na nulu a pri umiestnení kurzora na odkaz pridáme červenú farbu.

Li.dws-li a:hover( farba: #e62117; )

Li.dws-li a( ... padding: 5px; ) li.dws-li a::before( ... hore: 90 %; ) li.dws-li a::after( ... top: 90 % ;)

V podstate som vám ukázal, čo som chcel, a ukázalo sa, že je to celkom pekné menu.

Lekciu pripravil Denis Gorelov.

Časy rozloženia stránok založeného na plávajúcich prvkoch a manipulácii s okrajmi sú takmer minulosťou. CSS dáva vývojárom nové a vylepšené vlastnosti na vytváranie rozložení. Takéto tradičné veci rozloženia, ako je vertikálne zarovnanie, jednotné vzdialenosti medzi prvkami, zmena usporiadania prvkov bez zmeny ich poradia v rozložení a ďalšie vzory, ako napríklad „prilepená päta“, sa dajú jednoducho implementovať pomocou Flexboxu.

V tomto článku sa pozrieme na vzory rozloženia, ktoré sú vhodné na implementáciu na Flexbox. Ako príklad použijeme rozhranie aplikácie Tracks, ktorá implementuje princípy atomického dizajnu. Poviem o situáciách, kedy sa Flexbox hodí a spomeniem úskalia spojené s jeho spárovaním so špecifickými vzormi rozloženia. Pozrieme sa na vzory, ktoré vám spôsobujú problémy, ponúkneme náhradné riešenia na riešenie problémov a ponúkneme ďalšie taktiky, ako začať používať túto vlastnosť hneď teraz.

Flexibilné atómové komponenty

Rozhranie Tracks využíva prístup, ktorý sa na každý kúsok pozerá izolovane, založený na princípoch Brada Frosta.

Filozofiu atómového dizajnu možno považovať za ekvivalent LEGO blokov pre webový dizajn. Vedecké termíny ako organizmus, molekula, atóm sa používajú na to, aby vývojárom poskytli klasifikáciu prvkov rozhrania, a teda aj hlbšie pochopenie každého fragmentu ako súčasti celku. Táto metóda kategorizácie umožňuje identifikovať tieto vzory a zabraňuje vonkajším faktorom, ako sú mriežky, farby a vzdialenosti, aby tento proces ovplyvňovali. Vybudovanie rozhrania z mikroúrovne umožňuje väčšie opätovné využitie jeho základných mikroprvkov.

Obrázok 1: Tieto prvky aplikácie sa používajú na zobrazenie údajov založených na princípoch atómového dizajnu. Uhádnete, ktoré používajú Flexbox? (väčšia verzia)

Obrázok 2. Hlavné rozhranie aplikácie Tracks využívajúce výhody flexboxu a atomického dizajnu. (väčšia verzia)

Návrh rozhrania bol predložený ako súbor prototypov spoločnosti InVision s dokumentáciou toku a používateľského rozhrania. Počas úvodného auditu používateľského rozhrania som začal identifikovať oblasti, v ktorých malo zmysel implementovať Flexbox. Rozhodol som sa tiež použiť Flexbox na rozloženie stránky, pričom som použil tradičné vzory „bočný panel vľavo, hlavný obsah vpravo“ zvyčajne implementované pomocou plávajúcich polí.

Html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target ( display: flex; flex-direction: row; ) html.no-flexbox ul.flexbox-target li, html.no-js ul. flexbox-target li ( display: inline-block; /* Namiesto toho by sa dal použiť aj systém rozloženia s pohyblivou polohou */ )

Ak podpora flexboxu nie je dostupná, použijeme display: inline-block . K tej istej deklarácii pridáme triedu no-js v prípade vypnutia JavaScript prehliadač. CSS kaskáda bude fungovať aj tam, kde nie je Flexbox alebo JavaScript, a aj keď sa vyskytnú problémy s načítaním. Flexbox môže koexistovať s float, display: table a position: relatívne; Prehliadače, ktoré podporujú Flexbox, ho používajú prednostne, zatiaľ čo prehliadače, ktoré ho nepodporujú, budú obmedzené na tradičné mechanizmy rozloženia CSS.

Ako vždy, konečný výber technológie bude závisieť od cieľov projektu, jeho rozpočtu a analytických údajov. Mojím zlatým pravidlom je vždy vybrať pre projekt tú najinteligentnejšiu možnosť.

Vzory čiar

Navigačné komponenty sa ukázali ako veľmi vhodné pre Flexbox nielen z dôvodu jednoduchosti implementácie, ale aj z dôvodu zníženia množstva stráveného času. Inline vzory sú známe tým, že vysávajú vývojárom čas, ale s Flexboxom hovoríme o minútach. Ak ste takéto veci implementovali v ére pred IE9, pochopíte, aké dôležité je to.

Obrázok 3: Táto navigácia na paneli administrátora používa vzor čiar s vertikálne vycentrovanými navigačnými prvkami. (väčšia verzia)

Značenie vzoru navigácie na paneli správcu pozostáva z navigačnej značky, ktorá zalamuje odkazy. Tu je kód HTML tohto vzoru:

A zodpovedajúce štýly:

Nav ( display: flex; align-items: center; /* Stred navigačných položiek vertikálne */ ) nav a ( display: inline-block; /* Aby sa predišlo problémom s rozložením vložených prvkov s vlastnosťou order v IE 10 */ ) nav a (flex: 1; )

CSS sa ukázalo byť rovnako minimalistické ako značkovanie. Všimnite si vložený blok určený pre navigačné odkazy. Toto vyhlásenie rieši všetky možné budúce problémy v IE10, ak sa rozhodnete zmeniť poradie prvkov pomocou vlastnosti order. Vieme tiež, že všetky okraje a okraje dané priamym potomkom flex kontajnera spôsobujú problémy s rozložením v IE10; aby ste sa takýmto veciam vyhli, má zmysel vždy kontrolovať rozloženie v krížovom prehliadači.

Obrázok 4. Vzor navigácie v hlavičke s logom v strede sa často nachádza na webe a ľahko sa prispôsobí Flexboxu. (väčšia verzia)

Tradične sa inline vzor zvyčajne implementuje pomocou nesémantického značkovania, s Flexboxom sa bez takýchto trikov zaobídeme.

Rozloženie pozostáva z kolekcie položiek ponuky umiestnených vľavo a vpravo od loga v strede. Označenie tohto vzoru je nasledovné:

Flexbox môže znížiť potrebu hackovania HTML a umožňuje zachovať sémantiku, ako je znázornené na značkách. Sémantická podpora je dôležitá, pretože toto HTML má veľkú šancu na použitie v budúcnosti; Existuje na to mnoho ďalších dôvodov, ktoré presahujú rámec tejto diskusie.

Pred Flexboxom používali vývojári na usporiadanie inline rozloženia prístupy display: inline-block a dokonca float: left. Flexbox je teraz životaschopnou možnosťou a vývojári už nie sú nútení používať zlé postupy v záujme krásneho dizajnu. Požadovaný CSS nie je taký stručný ako predchádzajúci príklad vzoru na obrázku 3, ale je ľahšie implementovať ho ako staršie metódy.

Pipeline-header ( display: flex; align-items: center; justify-content: space-between; ) .pipeline-header > a ( display: inline-block; /* IE 10 nerozpozná poradie, takže urobíme toto aby ste sa vyhli nepárnym rozloženiam. */ ) .pipeline-logo ( flex: 1; poradie: 2; text-align: center; ) .pipeline-nav ( flex: 1,25; poradie: 1; ) .pipeline-search ( flex: 1; poradie: 3; ) a ( poradie: 4; )

Keď používate flexbox vo vzore na obrázku 3, nezabudnite, že poradie v značke sa dá zmeniť. Ak je potrebné logo presunúť, vykoná sa to jednoducho pomocou vlastnosti objednávky. Majte na pamäti, že poradie v značkách je dôležité pre dostupnosť a to je kontroverzné, pokiaľ ide o Flexbox, najmä vzhľadom na rôznu implementáciu dostupnosti v rôznych prehliadačoch. Prehliadače (okrem Firefoxu) a čítačky obrazovky používajú poradie rozloženia na navigáciu pomocou klávesnice, a nie vizuálne poradie vytvorené pomocou CSS.

Obrázok 5: Tok znázornený v značke a vykreslený v prehliadači, resekvenovanie pomocou flexboxu bez zmeny označenia. (väčšia verzia)

Nižšie je uvedený kód pre takéto rozloženie. Značenie sa nepoužíva na zmenu poradia prvkov.

Tu sa CSS používa na zmenu poradia prvkov v diagrame vpravo na obrázku 5.

Kontajner ( zobrazenie: ohyb; smer ohybu: stĺpce; /* riadok je predvolená hodnota */ ) hlavička ( poradie: 2; ) hlavná ( poradie: 3; ) päta ( poradie: 1; )

Tento typ rozloženia sa používa nielen na navigáciu. Možno ste to videli v päte.

Obrázok 6: Rovnaký vzor, aký sme použili pri navigácii, je použitý v päte. (väčšia verzia)

Pri použití tohto vzoru si uvedomte, že obsah nemusí mať v kontajneri dostatok miesta. Má sa obsah šíriť od stredu k okrajom? Ako to ovplyvní zvyšok rozloženia? Zamyslite sa nad týmito otázkami skôr, ako začnete s projektom. A majte na pamäti, že navigácia pomocou klávesnice je pre používateľov dôležitá.

Polia na zadávanie riadkov

Tvary môžu byť nočnou morou dizajnu, najmä ak sú úzko spojené so zložitou mriežkovou štruktúrou vytvorenou vo Photoshope. Vzor „inline label“, ako to nazývam, je pre náš priemysel rovnako dôležitý ako Fender Stratocaster pre rockovú hudbu.

Obrázok 7: Inline štítky a vstupné polia sú ďalšou oblasťou, kde možno použiť Flexbox. Dávajte si však pozor na to, ako sa text štítku posúva späť do vstupného poľa v závislosti od množstva textu. (väčšia verzia)

Ako už bolo spomenuté v predchádzajúcej časti, musíte sa rozhodnúť, ako sa bude obsah distribuovať v kontajneri, keď sa zmení veľkosť prehliadača alebo keď sa vyskytne dynamický obsah.

Obrázok 8: Rozhodnite sa, ako sa bude váš obsah rozširovať. Vľavo je display:table s vertikálnym zarovnaním v strede, vpravo je flexbox so stredovým zarovnaním. (väčšia verzia)

Tieto snímky obrazovky jasne ukazujú chyby Flexbox s dynamickým alebo veľkým obsahom. Efekt na pravom obrázku je to, čo nazývam „presúvanie do stredu“, čo znamená, že nový obsah sa posúva smerom von zo stredu.

Tu je označenie pre vzor štítku čiary na obrázku 8.

…

Riešením problému je použitie display: table; Pre dlhý text. To umožňuje, aby obsah prúdil zhora nadol a nie od stredu k okrajom.

Form-group ( display: flex; ) .form-group label ( display: table; vertical-align: middle; ) .form-group input ( flex: 1; )

Kombinácia flexboxu a display: table je skvelá technika, ktorú stojí za to preskúmať ďalej. Pri jeho používaní je však dôležité vždy skontrolovať rozloženie v testovacom prostredí, aby sa včas identifikovali chyby.

Obrázok 9: Použitím vstupných polí a tlačidiel na rovnakom riadku sa vytvorí rovnováha v dizajne tým, že sa udržia vo výške. (väčšia verzia)

Videl som veľa vyhľadávacích polí implementovaných pomocou tohto vzoru. Ide o veľmi flexibilný vzor, ktorý je možné opätovne použiť v širokej škále šablón. Samozrejme, CSS tu môže zaviesť všestrannosť vzorov pomocou kontextovo špecifických vlastností; tomu by sa malo vyhnúť.

Požadovaný kód HTML je typický a obsahuje obal div pre štruktúru flexboxu.

A tu sú štýly:

Form-group ( display: flex; ) .form-group input ( flex: 1; )

Rozbaľovacia ponuka

Obrázok 10. Časť stránky s rozbaľovacím menu je zvýraznená pomocou funkcií Flexbox na rýchle umiestnenie. (väčšia verzia)

Rozbaľovacia ponuka pozostáva zo stĺpca naľavo, ktorý obsahuje zvislo centrované riadkové položky, a zo zoznamu položiek napravo s každou položkou v samostatnom riadku.

Obrázok 11. Hlavná ponuka rozhrania je vytvorená pomocou Flexboxu na rozloženie. (väčšia verzia)

Označenie pre túto navigačnú ponuku používa ako základ nasledujúci kód HTML.

Zodpovedajúce CSS je jednoduché a jasné, presne tak, ako to majú vývojári radi.

Menu ( display: flex; ) .menu__options ( display: flex; align-items: center; ) .menu__items ( display: flex; flex-direction: column; )

Požadované rozloženie sa vykoná pomocou niekoľkých riadkov kódu. Navyše je tento kód oddelený od štruktúry mriežky a označenie si zachováva svoj sémantický význam. Toto je ďalší príklad schopnosti Flexboxu vyhnúť sa zložitému polohovaniu a neprehľadným usporiadaniam.

Mediálne objekty

Obrázok 12: Vzor mediálneho objektu používa flexbox, pričom SVG s pevnou šírkou je umiestnený naľavo a zvyšok obsahu flexboxu je umiestnený vedľa neho. (väčšia verzia)

Tento univerzálny vzor, známy ako „mediálny objekt“, umiestňuje obrázok alebo video na jednu stranu so zvyškom obsahu vedľa neho.

…

Medi-obj ( display: flex; align-items: flex-start; ) .media-obj__body ( flex: 1; )

Obrázok 13. Toto je extrémny prípad zmeny veľkosti okna prehliadača, obrázok je nastavený na maximálnu šírku a pravá strana je nastavená na ohyb 1. Buďte opatrní pri miešaní prvkov s pevnou šírkou a prvkov ohybu

Flexbox funguje skvele s týmto vzorom, ale buďte opatrní, pretože mediálny obsah môže interagovať s iným obsahom rovnakým spôsobom, ako je uvedené vyššie. Na príklade môžete vidieť, ako sa grafický priestor zrúti a text sa vysunie zhora. Môže sa to zdať ako hlúpy príklad, pretože kto by urobil svoj prehliadač tak úzkym? Ale to nie je to dôležité – pred použitím Flexboxu musíme len pochopiť, ako obsah súvisí s jeho prostredím.

Riešením tohto vzoru by bolo nastaviť obrázky na maximálnu šírku: 100 % pre médiá vo vnútri flexboxu alebo použiť pevnú šírku obrázka a dopyty na médiá na ich úpravu podľa potreby.

Kalendár Flexbox

Kalendár je jedným z najbežnejších widgetov. Môžete sa opýtať, prečo nepoužiť stôl? V našom prípade sa kalendár používa na jednoduchý výber dátumov, takže som sa rozhodol použiť tlačidlá pre dni, mesiace a roky a obmedziť tieto tlačidlá na okraje riadkov (každý riadok kalendára týždňa je zabalený do samostatného div). Použitie tohto prístupu vám umožňuje znížiť množstvo značiek a zjednodušiť vytváranie rozloženia (mnohé vďaka

V tomto príspevku chcem ukázať jeden spôsob implementácie responzívneho horizontálneho menu pomocou Flexboxu. Táto metóda implementácia menu je použitá na stránke Warface Hub, ale s trochu inou štruktúrou a použitým O viac píšťaliek.

Asi pred rokom som skončil vo firme, kde mi povedali úžasnú vetu: „Najskôr urobíme všetko s pomocou CSS a potom už len pridáme JavaScript.“ Rada sa zdala byť dobrá a ja som sa ňou riadil. Ale ako to už býva, nechal som sa uniesť. Teraz sa mi vrátilo, že nie všetko treba robiť s týmto prístupom.

A tak bližšie k veci. Začal som študovať a realizovať.

Ciele

získať základné zručnosti v práci s vlastnosťami Flexboxu;
vytvoriť horizontálne adaptívne menu;
Výsledné riešenie aplikujte v projekte.

Nástroje a dokumentácia

NPM – ako správca balíkov (teraz aktívne prechádzame na Yarn)
Grunt je nástroj, ktorý vám pomôže vybudovať váš projekt
Dokumentácia Flexbox (pozri užitočné odkazy);

Môžete použiť vlastnú sadu nástrojov

Štruktúra

Na usporiadanie štruktúry štýlu pre menu som použil opísaný koncept. Autor tohto konceptu navrhuje rozdeliť všetky popisy štýlu na niekoľko častí:

rozloženie– popisuje polohu komponentov a prvkov na stránke;
komponent– popisuje zobrazenie a správanie prvkov, ktoré sú súčasťou komponentu;
element– popisuje zobrazenie a správanie jedného prvku;

Takže moje pochopenie konceptu ma priviedlo k tejto štruktúre:

Základňa- popis konštánt, základné štýly (ako v normalize.css)
Komponent- popis komponentov aplikácie. V našom prípade komponent „Menu“.
Element- popis štýlov pre prvky ako tlačidlo, odkaz atď.
Rozloženie- popis umiestnenia blokov na stránke
štýl.scss- v tomto súbore dáme všetko dokopy

CSS a HTML vstupné a štítkové značky

Skôr ako začneme kresliť HTML značky, rád by som pripomenul/ukázal zaujímavé správanie CSS selektorov, ktoré sa nám bude hodiť.

Text 1 Text 1
V tomto príklade si môžete všimnúť, že keď kliknete na štítok, dostanete vybraný vstup. Na tom nie je nič zvláštne (pozri), ale najzaujímavejšia vec sa stane s CSS strany selektory.

Vstup: začiarknutý (farba okraja: červená; )
Tento selektor CSS sa spracuje iba vtedy, keď je vybratý vstup (pozri: začiarknuté)

Druhým bodom, ktorému je potrebné venovať pozornosť, je Selektor CSS je výber nasledujúceho prvku (pozri Prepínače susedných súrodencov a Všeobecné výbery súrodencov). To znamená, že môžeme vybrať ďalší prvok po aktuálnom prvku.

Vstup: začiarknuté + .label ( farba: červená; )
V tomto príklade dostaneme nasledujúce správanie: keď je vybraný prvok s triedou vstupu, nasledujúci prvok s triedou štítkov sa zmení v súlade s popísanými štýlmi.

Teraz sa to všetko dá kombinovať.

Štruktúra menu s jedným prvkom

V tomto príklade som pridal niekoľko prvkov vstupu a označenia, aby som vytvoril nasledujúce správanie:

Každý prvok name=menu-item-trigger okrem prvého v stave :checked zmení viditeľnosť a pozície následné prvky label.menu-item-close a div.menu-sub tak, že prvok label.menu-item-close úplne prekrýva prvok label.menu-item-label a prvok div.menu-sub sa zobrazí pod label.menu- prvok prvku -label. To znamená, že otvoríme podmenu a zmeníme správanie pri kliknutí na hlavnú ponuku;
Prvý prvok name=menu-item-trigger sa použije iba na vrátenie všetkých zmien aplikovaných v predchádzajúcom odseku, to znamená na zatvorenie podponuky;

Nie je vybratá žiadna položka ponuky:

Vybraná jedna položka ponuky:

Po takýchto manipuláciách zostáva len skryť vstupné prvky.

Flexbox

Teraz musíme pridať štýly, aby toto menu dobre zobrazené v rôznych rozlíšeniach a rôznych prehliadačoch. V súčasnosti sme svoje úsilie zamerali na podporu tých prehliadačov, ktoré návštevníci nášho zdroja používajú najčastejšie. Výsledkom je malý zoznam: Chrome, Firefox, IE Edge, IE 11 a ich mobilné verzie najnovšie verzie.

Podpora je poskytovaná pridaním predpôn (postcss) a samostatným písaním štýlov pre konkrétny prehliadač.

Flexbox uľahčuje dosiahnutie odozvy. Nádobu stačí popísať, no niekedy bude potrebné vyriešiť problémy s obsahom vo vnútri. Napríklad:

položky menu s dlhými slovami ako „knowledge base“ a jeho nemecký preklad „Wissensdatenbank“. IN v tomto prípade pre text sa pridá prvok obtekania, na ktorý sa použijú nasledujúce štýly:
Label-text ( // @link: http://htmlbook.ru/css/text-overflow overflow: skrytý; text-overflow: elipsa; šírka: 100 %; display: inline-block; )
Obrázky, ktoré je potrebné roztiahnuť na šírku, ale pri nastavení šírky: 100 %; presahujú nad rámec rodičovského bloku. Tu pomôže veľkosť boxu: border-box; pre tento prvok;
Môžu sa vyskytnúť aj problémy s tým, že podradené prvky nezaberajú celú možnú dĺžku alebo nie sú rozmiestnené rovnomerne. Tu môže pomôcť flex: 1 1 auto.

V tomto príklade je kontajner pre prvky opísaný takto:

Ponuka ( display: flex; align-items: center; flex-wrap: wrap; )
Každý prvok v kontajneri musí mať taký štýl, aby vyplnil všetok možný priestor a zarovnal obsah v sebe vertikálne na stred:

Položka ponuky ( ohyb: 1 1 auto; zobrazenie: ohyb; smer ohybu: stĺpec; zarovnanie položiek: natiahnutie; )

Krajšie zobrazenie menu je možné dosiahnuť použitím