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

29.06.2020

Na príklade formulára zo skutočného testovacieho zadania vám ukážem, ako sa sádzať BEM použitím flexbox... Pýtate sa: „Prečo je potrebné sádzať BEM + Flexbox? "Táto požiadavka pochádza od zamestnávateľa. Citát z TK:" Skúste sadzbu bez rámcov (najlepšie na flexbox) je jednoduchý a priamočiary: vyhnite sa objemným konštrukciám a zbytočnému kódu, použite metodiku BEM."

Fragment rozloženia sekcie s formulárom

Moje pravidlá rozloženia

Rozdeľte rozloženie na logické časti
Začnite každú sekciu štítkom oddiele
Samostatné oddiely a CSS riadený oddelene, prázdny riadok
Ku každej značke priraďte triedu
Názov triedy pre blok alebo prvok odpovedá na otázku - Čo je to?
Názov modifikátora odpovedá na otázku - Ktoré?

HTML značky

Najprv urobím označenie, vnorím bloky a pomenujem triedy. V nižšie uvedenom kóde máme dve vložené značky - h2 a vstup... Vložené značky sú bolesťou hlavy a príčinou stresu pre začínajúcich dizajnérov rozloženia. prečo? Správajú sa veľmi zle - snažia sa obsadiť celú dostupnú šírku, neumožňujú nastaviť farbu pozadia a veľkosti celého bloku.

osobné informácie

Čo potom robí zlý návrhár rozloženia? Zabalí vložené prvky do blokových značiek div a nastaví všetky potrebné vlastnosti tagu wrapper. Podradené prvky dedia tieto vlastnosti. Oplatí sa postaviť záhradu z extra kódu? Čo urobí kompetentný dizajnér dispozičného riešenia? Prepíše vložený prvok tak, aby bol blokom alebo vloženým blokom, in CSS pravidlá.

Displej: blok; // pre vstupnú značku
displej: inline-block; // pre značku h2

Logika vnorenia a názvy blokov

Vidíme sekciu s osobnými informáciami, takže triedu sekcie voláme - Info... Oddiel pozostáva z troch detí:

Ikona // názov triedy info__icon
názov // info__title
formulár // info__form

Spodný riadok je v názvoch tried BEM, spočíva v spolupatričnosti dieťaťa k rodičovi. Nie je možné pomenovať prvok ikonu... Toto nie je len nejaká ikona, ale ikona zo sekcie Info.

Dcéra a rodič sa spojili do jedného

Blokovať info__form, mame specialny - je vnoreny v sekcii Info, ale zároveň obsahuje polia formulára. Názov tohto javu je viacúrovňové hniezdenie. Blok s formulárom má iba funkciu zalamovania vstupov, aby ste mohli jednoducho nastaviť externú výplň. Malé vstupy sa totiž správajú ako deti (kto sú), vôbec neposlúchajú. Okrem toho je druhý vstup kratší ako všetky ostatné a líši sa iba šírkou.

Nastavili sme jednu triedu pre všetky vstupy s rovnakými vlastnosťami, okrem šírky - info__vstup... Pre bežné vstupy pridajte modifikátor info__input_long a krátkym modifikátorom vstupu info__input_short... Dovoľte mi pripomenúť, že modifikátor by BEM, by mal odpovedať na otázku - Ktoré?

CSS pravidlá pre modifikátory

.info__input_long (
šírka: 520px;
}

Info__input_short (
šírka: 320px;
}

CSS kód

V Html markup vytvára hrubú štruktúru webu, v CSS, už umiestňujeme prvky podľa rozloženia. Dnes sa nebudeme zaoberať vzhľadom, ale zameriame sa na umiestnenie prvkov. V našej sekcii sa nachádzajú dva flex kontajnery. Musím povedať, že použitie ohybov pri usporiadaní všetkých prvkov jeden po druhom v rade je veľmi pochybné. Jedinou získanou výhodou je majetok ospravedlniť-obsah stredové zarovnanie flexibilných predmetov. Na svoju obranu môžem povedať, že myšlienka s flexami je nezmyselná len v kontexte tejto časti. Skutočné rozloženie má zvyčajne väčšiu rozmanitosť.

Info (
displej: flex;
justify-content: center;
align-items: center;
smer ohybu: stĺpec;
margin-top: 77px;
výška: 100 %;
}

Info__form (
displej: flex;
justify-content: center;
smer ohybu: stĺpec;
výška: 100 %;
margin-top: 50px;

Flexbox možno právom nazvať úspešným pokusom o vyriešenie veľkého množstva problémov pri budovaní layoutov v css. Ale predtým, než prejdeme k jeho popisu, poďme zistiť, čo je zlé na metódach rozloženia, ktoré teraz používame?

Každý sadzač pozná niekoľko spôsobov, ako niečo zvisle zarovnať, alebo vytvoriť 3-stĺpcové rozloženie s gumeným stredovým stĺpcom. Ale priznajme si, že všetky tieto metódy sú dosť zvláštne, podobné hacku, nie sú vhodné vo všetkých prípadoch, sú ťažko pochopiteľné a nefungujú, ak nie sú splnené určité magické podmienky, ktoré sa historicky vyvinuli.

Stalo sa to preto, že html a css sa vyvinuli evolučne. Webové stránky zo začiatku vyzerali ako jednovláknové textové dokumenty, o niečo neskôr bola stránka rozdelená na bloky tabuľkami, potom prišlo do módy sádzať floaty a po oficiálnej smrti ie6 pribudli aj inline-blokové triky. Výsledkom je, že sme zdedili výbušnú zmes všetkých týchto techník, ktoré sa používajú na zostavenie rozložení pre 99,9 % všetkých existujúcich webových stránok.

Viacriadkové usporiadanie boxov v rámci flex kontajnera.

ohybný obal

Všetky príklady, ktoré sme uviedli vyššie, boli zostavené s ohľadom na jednoriadkové (jednostĺpcové) usporiadanie blokov. Je potrebné povedať, že štandardne flexibilný kontajner vždy usporiada bloky v sebe do jedného riadku. Špecifikácia však podporuje aj viacriadkový režim. Vlastnosť flex-wrap CSS je zodpovedná za viacriadok vo vnútri flex kontajnera.

Dostupné hodnoty ohybný obal:

nowrap (predvolené): bloky sú usporiadané v jednom riadku zľava doprava (v rtl sprava doľava)
zábal: bloky sú usporiadané v niekoľkých horizontálnych radoch (ak sa nezmestia do jedného radu). Idú za sebou zľava doprava (v rtl sprava doľava)
wrap-reverse: rovnaký ako obal, ale bloky sú v opačnom poradí.

flex-flow - Pohodlná skratka pre flex-direction + flex-wrap

Flex-flow v skutočnosti poskytuje schopnosť opísať smer hlavnej osi a viacčiaru priečnej osi v jednej vlastnosti. Štandardne flex-flow: row nowrap.

flexibilný prietok:<‘flex-direction’> || <‘flex-wrap’>

CSS

/ * t.j. ... * / .my-flex-block (flex-direction: column; flex-wrap: wrap;) / * toto je to isté ako ... * / .my-flex-block (flex-flow: column wrap ;)

zarovnať-obsah

K dispozícii je tiež vlastnosť align-content, ktorá určuje, ako sú výsledné rady boxov vertikálne zarovnané a ako rozdeľujú celý priestor flexibilného kontajnera.

Dôležité: align-content funguje len vo viacriadkovom režime (t. j. v prípade flex-wrap: wrap; alebo flex-wrap: wrap-reverse;)

Dostupné hodnoty zarovnať-obsah:

flex-start: rady škatúľ sú pritlačené k začiatku flex kontajnera.
flex-end: rady škatúľ sú pritlačené ku koncu flex kontajnera
stred: rady škatúľ sú v strede flex kontajnera
medzera medzi: prvý rad škatúľ je na začiatku flex kontajnera, posledný rad škatúľ je na konci, všetky ostatné rady sú rovnomerne rozmiestnené v zostávajúcom priestore.
priestor okolo: Rad škatúľ sú rovnomerne rozmiestnené od začiatku po koniec flexibilného kontajnera, čím sa všetok voľný priestor rozdeľuje rovnomerne.
natiahnuť (predvolené): Riadky blokov sú natiahnuté, aby vyplnili dostupný priestor.

Vlastnosti flex-wrap a align-content CSS by sa mali aplikovať priamo na flex kontajner, nie na jeho potomkov.

Ukážka viacriadkových vlastností vo flexe

Pravidlá CSS pre deti flex kontajnerov (flex boxy)

flex-base - veľkosť základne jedného flex boxu

Nastaví počiatočnú veľkosť hlavnej osi pre flex box predtým, ako sa naň použijú konverzie založené na iných faktoroch flex. Možno zadať v ľubovoľnej jednotke dĺžky (px, em,%, ...) alebo automaticky (predvolené). Ak je nastavený ako automatický - za základ sa berú rozmery bloku (šírka, výška), ktoré môžu závisieť od veľkosti obsahu, ak nie sú výslovne uvedené.

flex-grow - chamtivosť jedného flex bloku

V prípade potreby určuje, o koľko môže byť jeden flex box väčší ako súrodenecké položky. flex-grow nadobúda hodnotu bez jednotiek (predvolená hodnota 0)

Príklad 1:

Ak majú všetky flex boxy vo vnútri flex kontajnera flex-grow: 1, budú mať rovnakú veľkosť
Ak má jeden z nich flex-grow: 2, potom bude 2-krát väčší ako všetky ostatné.

Príklad 2:

Ak majú všetky flex boxy vo vnútri flex kontajnera flex-grow: 3, budú mať rovnakú veľkosť
Ak má jeden z nich flex-grow: 12, potom bude 4-krát väčší ako všetky ostatné.

To znamená, že absolútna hodnota flex-grow neurčuje presnú šírku. Definuje, aké je chamtivé s ostatnými flexboxmi rovnakej úrovne.

flex-shrink - faktor "stlačiteľnosti" jedného flex-bloku

Určuje, o koľko sa flex box zmrští v porovnaní so susednými prvkami vo vnútri flex kontajnera, ak nie je dostatok voľného miesta. Predvolená hodnota je 1.

flex - skratka pre vlastnosti flex-grow, flex-shrink a flex-basis

flex: žiadny | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/ * t.j. ... * / .my-flex-block (flex-grow: 12; flex-shrink: 3; flex base: 30em;) / * toto je to isté ako ... * / .my-flex-block ( flex : 12 3 30 em ;)

Demo pre flex-grow, flex-shrink a flex-base

align-self - zarovnanie jedného flex boxu pozdĺž priečnej osi.

Umožňuje prepísať vlastnosť flexibilného kontajnera align-items pre individuálny flexibilný blok.

Dostupné hodnoty pre align-self (rovnakých 5 možností ako pre align-items)

flex-start: flex box je pritlačený k začiatku priečnej osi
flex-end: flex box je pritlačený ku koncu priečnej osi
stred: flex boxy sú umiestnené v strede priečnej osi
základná línia: flex box je zarovnaný so základnou líniou
natiahnuť (predvolené): Flex box sa natiahne tak, aby vyplnil všetok dostupný priestor naprieč osami, pričom rešpektuje minimálnu šírku / maximálnu šírku, ak existuje.

objednávka – poradie, v ktorom je objednaný jeden flex box v rámci flex kontajnera.

Štandardne budú všetky bloky nasledovať za sebou v poradí uvedenom v html. Túto objednávku je však možné zmeniť pomocou vlastnosti objednávky. Zadáva sa ako celé číslo a predvolene je 0.

Hodnota objednávky nešpecifikuje absolútnu pozíciu prvku v sekvencii. Určuje váhu pozície položky.

Html

položka1

položka2

položka 3

položka 4

položka 5

V tomto prípade budú bloky nasledovať jeden po druhom pozdĺž hlavnej osi v nasledujúcom poradí: položka5, položka1, položka3, položka4, položka2

Demo pre zarovnanie a poriadok

okraj: auto vertikálne... Sny sa stanú skutočnosťou!

Flexbox môžete milovať už len pre to, že známe horizontálne zarovnanie cez okraj: auto tu funguje aj pre vertikálne!

My-flex-container (displej: flex; výška: 300px; / * Alebo čokoľvek * /). My-flex-block (šírka: 100px; / * Alebo čokoľvek * / výška: 100px; / * Alebo čokoľvek * / okraj: auto; / * Kúzlo! Blok je vycentrovaný vertikálne a horizontálne! * /)

Veci na zapamätanie

Nemali by ste používať flexbox tam, kde to nie je potrebné.
V mnohých prípadoch je stále užitočné, aby definovanie oblastí a zmena poradia obsahu závisela od štruktúry stránky. Premysli si to.
Pochopte flexbox a poznajte základy. Vďaka tomu je oveľa jednoduchšie dosiahnuť očakávaný výsledok.
Nezabudnite na marže. Zohľadňujú sa pri nastavovaní zarovnania osí. Je tiež dôležité pamätať na to, že okraje flexboxu sa „nezrútia“ ako pri normálnom toku.
Hodnota float flex boxov je ignorovaná a irelevantná. To sa asi dá nejako využiť na ladnú degradáciu pri prechode na flexbox.
flexbox sa veľmi dobre hodí na rozloženie webových komponentov a jednotlivých častí webových stránok, ale neosvedčil sa pri rozložení základných rozložení (umiestnenie článku, hlavičky, päty, navigačnej lišty a pod.). Toto je stále kontroverzný bod, ale tento článok celkom presvedčivo ukazuje nedostatky xanthir.com/blog/b4580

Konečne

Myslím si, že flexbox, samozrejme, nenahradí všetky ostatné metódy rozloženia, ale samozrejme, v blízkej budúcnosti si to pri riešení veľkého množstva úloh zaberie slušné miesto. A určite s ním teraz musíte skúsiť pracovať. Jeden z ďalších článkov bude venovaný konkrétnym príkladom práce s flex-layoutom. Prihláste sa na odber noviniek ;)

V tomto článku sa pozrieme na technológiu CSS Flexbox 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 môžete veľmi jednoducho a flexibilne usporiadať prvky v kontajneri, rozdeliť medzi ne dostupný priestor a zarovnať ich tak či onak, aj keď nemajú konkrétne rozmery.

CSS Flexbox uľahčuje vytváranie responzívnych návrhov než používanie Float a Positioning.

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

Podpora prehliadača pre CSS Flexbox

CSS Flexbox podporujú všetky moderné prehliadače, ktoré sa v súčasnosti používajú (s predponami: 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 rozloženia CSS pomocou Flexbox začína nastavením požadovaného prvku HTML na vlastnosť CSS display s hodnotou flex alebo flex-inline.

Potom sa táto položka stane flexibilným kontajnerom a tým všetkým okamžitý deti sú flexibilné predmety. Zároveň, keď hovoríme o flexboxe, máme na mysli iba prvok s displejom: flex alebo displej: flex-inline a všetky prvky priamo nachádza v ňom. V CSS Flexbox teda existujú iba dva typy položiek: flexibilný kontajner a flexibilný prvok.

Prefixed a max-width vlastnosti boli pridané do CSS na podporu rozloženia vo väčšine prehliadačov.

Trieda riadku sa používa na „premenu“ bloku na flex kontajner. Nastavenie šírky flexibilných položiek .col__article a .col__aside vo vnútri kontajnera flex sa vykonáva pomocou vlastnosti flex CSS.

Ako príklad si označme pätu pomocou flexboxu a vytvorte blok pozostávajúci z troch prvkov v prvku .col__article (minimálna šírka jedného prvku je 300px). Do päty umiestnite štyri bloky (minimálna šírka jedného bloku je 200px).

Chcel by som hovoriť o FlexBoxe. Modul rozloženia Flexbox (flexibilný box, 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 druhov displejov a veľkostí obrazoviek).Flexibilný kontajner naťahuje predmety, aby vyplnil voľný priestor, alebo zmršťuje predmety, aby sa nedostali za hranice.

Najdôležitejšie je, že rozloženie flexboxu je nezávislé od smeru, na rozdiel od bežných rozložení (rámčeky, ktoré idú vertikálne, a vložené prvky, ktoré idú horizontálne).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, zmenšenie atď.).

Pretože flexbox je celý modul, nie len jedna vlastnosť, ale spája veľa vlastností.Niektoré z nich by sa mali vzťahovať na kontajner (rodičovský prvok, známy ako flexibilný kontajner), zatiaľ čo iné vlastnosti sa vzťahujú na podriadené alebo flexibilné položky.

Zatiaľ čo konvenč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ú prvky 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ú rozložené flexibilné položky.Upozorňujeme, že musí byť horizontálne, všetko závisí od kvality odôvodnenia obsahu.
hlavný štart | main-end - flexibilné predmety sú umiestnené v kontajneri z hlavnej-začiatočnej polohy do hlavnej-koncovej polohy.
hlavná veľkosť - šírka alebo výška flex položky v závislosti od zvolenej základnej veľkosti.Základným rozmerom môže byť šírka alebo výška prvku.
krížová os - krížová os kolmá na hlavnú.Jeho smer závisí od smeru hlavnej osi.
krížový štart | krížový koniec - ohybné vedenia sú naplnené predmetmi a umiestnené v kontajneri z krížovej počiatočnej polohy a krížovej koncovej polohy.
veľkosť kríža - šírka alebo výška flex položky v závislosti od zvoleného rozmeru sa rovná tejto hodnote.Táto vlastnosť sa zhoduje so šírkou alebo výškou prvku v závislosti od vybratého rozmeru.

Vlastnosti
displej: flex | inline-flex;

Definuje flexibilný kontajner (inline alebo blok na základe vybranej hodnoty), spája flexibilný kontext pre všetky jeho bezprostredné potomky.

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

Mysli na to:

Stĺpce CSS nefungujú s flexibilným kontajneromfloat, clear a vertical-align nefungujú s flexibilnými predmetmi

flex-direction