Meniu receptiv Flexbox. Meniu adaptiv fără Javascript. Componente atomice flexibile

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

Numele pictogramei:

• cărucior de cumpărături
• server
• folder-deschis
• ziar-o

Stilul CSS

După ce am făcut marcajul, trecem la styling. Deschide style.css în body și setează fundalul și fontul Verdana.

Corp (imagine de fundal: url("../img/escheresque_ste.png"); familia de fonturi: Verdana; )

Oferim blocului cu meniu un fundal și indentam partea de sus cu 100 de pixeli. și lățime pentru a umple întregul ecran.

Dws-meniu (culoare fundal: alb; margine-sus: 100px; lățime: 100%; )

În blocurile Ul, aliniem listele pe orizontală folosind desplay:flax , eliminăm umplutura și centrem elementele folosind justify-content:center .

Ul.dws-ul( afișare: flex; umplutură: 0; justificare-conținut: centru; )

Scoatem markerul din listele LI și le indentam pe toate părțile cu 10 vârfuri.

Li.dws-li (stil listă: niciunul; umplutură: 10px; )

Eliminați sublinierea din linkuri și creșteți textul la 18 pixeli. și fă-l negru.

Li.dws-li a( text-decor: niciunul; dimensiunea fontului: 18px; culoare: #000; )

Mutați pictograma puțin la dreapta folosind margin-right:10px .

Li.dws-li a i( margine-dreapta: 10px; )

Animație cu mouse-ul

După ce am realizat designul de bază, să trecem la animația de tip hover.

Să creăm pseudo elemente suplimentare care vor evidenția numele elementului atunci când treceți cu mouse-ul.

Să descriem partea stângă, să selectăm legăturile și să le atribuim pseudo-elementul li.dws-li a::before , scrieți conținut gol:’’; , 20 de poze latime. si o inaltime de 3 varfuri. suficient. Să setăm culoarea și pentru ca blocul să apară, atribuiți poziție: relativ la legături;

, și poziționați-l absolut pe legături, coborâți-l până în jos, apăsați-l spre marginea stângă.

Li.dws-li a( ... poziție: relativ; ) li.dws-li a::înainte( ... poziție: absolut; sus: 100%; stânga: 0; )

Duplicați acest bloc și atribuiți-i pseudo-elementul ::after. Schimbați parametrul stânga la dreapta, alegeți o altă culoare #ff2117.

Li.dws-li a::after( conținut: ""; lățime: 20px; înălțime: 3px; culoare de fundal: #ff2117; poziție: absolut; sus: 100%; dreapta: 0; )

Apoi facem animația hover. Selectați li și dați-le un fundal puțin mai întunecat.

Li.dws-li:hover( culoarea de fundal: #e5eae8; )

Pentru a face acest lucru, selectați listele de pe hover și adăugați-le un pseudo-element cu o lățime de 50% și setați transformarea de-a lungul axei X de la stânga la dreapta. Acest lucru îi va da mișcare.

Li.dws-li:hover a:before( lățime: 50%; transform: translateX(100%); )

Același lucru îl vom repeta și pentru pseudo-elementul ::after, doar că acum vom seta mișcarea de la dreapta la stânga.

Li.dws-li:hover a:after( lățime: 50%; transform: translateX(-100%); )

Li.dws-li a::before( ... tranziție: .5s; mix-blend-mode: înmulțire; ) li.dws-li a::after( ... tranziție: .5s; mix-blend-mode : inmultiti )

A ieșit destul de bine, acum să setăm lățimea la zero și să adăugăm culoare roșie atunci când trecem cu mouse-ul pe link.

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

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

Practic, v-am arătat ce îmi doream și s-a dovedit a fi un meniu destul de drăguț.

Lecția a fost pregătită de Denis Gorelov.

Modulul CSS Flexible Box Layout (modul CSS pentru machete cu blocuri flexibile), pe scurt flexbox, a fost creat pentru a elimina deficiențele la crearea unei game largi de modele HTML, inclusiv cele adaptate la diferite lățimi și înălțimi, și pentru a face aspectul logic și simplu . Și o abordare logică, de regulă, funcționează în locuri neașteptate, unde rezultatul nu a fost verificat - logica este totul!

Flexbox vă permite să controlați în mod elegant o varietate de parametri ai elementelor din interiorul unui container: direcția, ordinea, lățimea, înălțimea, alinierea de-a lungul și transversal, distribuția spațiului liber, întinderea și compresia elementelor.

Cunoștințe de bază

O FlexBox constă dintr-un Container și articolele acestuia (elementele flexibile).

Pentru a activa flexbox, orice element HTML trebuie doar să atribuie proprietatea CSS display:flex; sau afișare:inline-flex; .

După activarea proprietății flex, în interiorul containerului sunt create două axe: principală și transversală (perpendiculară (⊥), axă transversală). Toate elementele imbricate (de primul nivel) sunt aliniate de-a lungul axei principale. În mod implicit, axa principală este orizontală și direcționată de la stânga la dreapta (→), iar axa transversală este în mod corespunzător verticală și direcționată de sus în jos (↓).

Axele principale și transversale pot fi schimbate, apoi elementele vor fi amplasate de sus în jos (↓) și când nu se mai potrivesc în înălțime, se vor deplasa de la stânga la dreapta (→) - adică axele pur și simplu schimbate locurile . În acest caz, începutul și sfârșitul aranjamentului elementelor nu se schimbă - se schimbă doar direcțiile (axele)! Acesta este motivul pentru care trebuie să vă imaginați axele din interiorul containerului. Totuși, nu ar trebui să ne gândim că există niște axe „fizice” și ele influențează ceva. Axa aici este doar direcția de mișcare a elementelor din interiorul containerului. De exemplu, dacă am specificat alinierea elementelor la centrul axei principale și apoi am schimbat direcția acestei axe principale, atunci alinierea se va schimba: elementele au fost la mijloc pe orizontală, dar au devenit la mijloc pe verticală... Vezi exemplul.

O altă caracteristică importantă a Flexbox este prezența rândurilor în direcția transversală. Pentru a înțelege despre ce vorbim, să ne imaginăm că există o axă orizontală principală, sunt multe elemente și nu se „încadează” în container, așa că se mută pe alt rând. Aceste. un container arată astfel: un container cu două rânduri în interior, fiecare rând conținând mai multe elemente. Introdus? Acum amintiți-vă că putem alinia vertical nu numai elemente, ci și rânduri! Cum funcționează acest lucru se vede clar în exemplul pentru proprietate. Și așa arată schematic:

Proprietăți CSS care pot afecta modelul de aspect: float, clear, vertical-align, coloanele nu funcționează în design flex. Aici se folosește un model diferit pentru construirea unui aspect și aceste proprietăți CSS sunt pur și simplu ignorate.

Proprietăți CSS Flexbox

Flexbox conține diferite reguli CSS pentru a controla întregul design flex. Unele trebuie aplicate pe containerul principal, iar altele pe elementele acestui container.

Pentru container

Activează proprietatea flex pentru element. Această proprietate acoperă elementul în sine și elementele sale imbricate: sunt afectați doar descendenții de primul nivel - vor deveni elemente ale containerului flexibil.

• flex- elementul se întinde pe toată lățimea și are întregul său spațiu printre blocurile din jur. Rupele de linie apar la începutul și la sfârșitul blocului.
• inline-flex- un element este înfășurat în jurul altor elemente. În acest caz, partea sa internă este formatată ca element bloc, iar elementul în sine este formatat ca inline.

flex și inline-flex diferă prin faptul că interacționează diferit cu elementele din jur, similar cu display:block și display:inline-block .

Schimbă direcția axei principale a containerului. Axa transversală se modifică în consecință.

• rând (implicit)- direcția elementelor de la stânga la dreapta (→)
• coloană- direcția elementelor de sus în jos (↓)
• rând-invers- direcția elementelor de la dreapta la stânga (←)
• coloană-invers- direcția elementelor de jos în sus ()

Controlează transferul elementelor care nu se potrivesc în container.

• nowrap (implicit)- elementele imbricate sunt așezate pe un rând (cu direcție=rând) sau într-o coloană (cu direcție=coloană) indiferent dacă încap sau nu în container.
• înfășura- include elemente de mișcare pe rândul următor dacă nu se potrivesc în container. Acest lucru permite deplasarea elementelor de-a lungul axei transversale.
• înfășurare-invers- la fel ca wrap, doar transferul nu va fi in jos, ci in sus (in sens invers).

Combină atât proprietățile de direcție flexibilă, cât și proprietățile de înfășurare flexibilă. Ele sunt adesea folosite împreună, așa că pentru a scrie mai puțin cod, a fost creată proprietatea flex-flow.

flex-flow acceptă valorile acestor două proprietăți, separate printr-un spațiu. Sau puteți specifica o singură valoare pentru orice proprietate.

/* flex-direction only */ flex-flow: row; flex-flow: rând-invers; flex-flow: coloană; flex-flow: coloană-invers; /* flex-wrap only */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* ambele valori simultan: flex-direction și flex-wrap */ flex-flow: row nowrap; flex-flow: înfășurare coloană; flex-flow: coloană-reverse wrap-reverse;

justificare-conținut:

• Aliniază elementele de-a lungul axei principale: dacă direcția=rând, atunci pe orizontală și dacă direcția=coloană, apoi pe verticală. flex-start (implicit)
• - elementele vor merge de la început (s-ar putea să rămână ceva spațiu la sfârșit). flex-end
• - elementele sunt aliniate la sfârșit (spațiul va rămâne la început) centru
• - în centru (spațiul va rămâne în stânga și în dreapta) spațiu-între
• - elementele cele mai exterioare sunt presate pe margini (spațiul dintre elemente este distribuit uniform) spatiu-in jur
• - spatiul liber este distribuit uniform intre elemente (elementele cele mai exterioare nu sunt presate de margini). Spațiul dintre marginea recipientului și elementele exterioare va fi la jumătate față de spațiul dintre elementele din mijlocul rândului.

aliniere-conținut:

Aliniază rândurile care conțin elemente de-a lungul axei transversale. La fel ca justify-content numai pentru axa opusă.

Notă: Funcționează când există cel puțin 2 rânduri, de exemplu. Dacă există doar 1 rând, nu se va întâmpla nimic.

• Aceste. dacă flex-direction: row , atunci această proprietate va alinia rândurile invizibile pe verticală. Este important de reținut aici că înălțimea blocului trebuie stabilită rigid și trebuie să fie mai mare decât înălțimea rândurilor, altfel rândurile în sine vor întinde containerul și orice aliniere a acestora devine lipsită de sens, deoarece nu există spațiu liber între ele... Dar când flex-direction: coloană , atunci rândurile se mișcă orizontal → și lățimea containerului este aproape întotdeauna mai mare decât lățimea rândurilor și alinierea rândurilor are sens imediat...întindere (implicit)
• - rândurile se întind pentru a umple rândul complet flex-start
• - elementele vor merge de la început (s-ar putea să rămână ceva spațiu la sfârșit).- rândurile sunt grupate în partea de sus a containerului (s-ar putea să rămână ceva spațiu la sfârșit).
• - elementele sunt aliniate la sfârșit (spațiul va rămâne la început)- rândurile sunt grupate în partea de jos a containerului (spațiul va rămâne la început)
• - în centru (spațiul va rămâne în stânga și în dreapta)- rândurile sunt grupate în centrul containerului (spațiul va rămâne la margini)
• - elementele cele mai exterioare sunt presate pe margini (spațiul dintre elemente este distribuit uniform)- randurile exterioare sunt presate de margini (spatiul dintre randuri este distribuit uniform)
• - spatiul liber este distribuit uniform intre elemente (elementele cele mai exterioare nu sunt presate de margini). Spațiul dintre marginea recipientului și elementele exterioare va fi la jumătate față de spațiul dintre elementele din mijlocul rândului.- la fel ca spatiul-in jur, doar distanta dintre elementele exterioare si marginile recipientului este aceeasi ca intre elemente.

Aliniază elementele de-a lungul axei transversale într-un rând (rând invizibil). Aceste. Rândurile în sine sunt aliniate prin align-content , iar elementele din aceste rânduri (rânduri) sunt aliniate prin align-items și de-a lungul axei transversale. Nu există o astfel de împărțire de-a lungul axei principale, nu există conceptul de rânduri și elementele sunt aliniate prin justify-content .

• Aceste. dacă flex-direction: row , atunci această proprietate va alinia rândurile invizibile pe verticală. Este important de reținut aici că înălțimea blocului trebuie stabilită rigid și trebuie să fie mai mare decât înălțimea rândurilor, altfel rândurile în sine vor întinde containerul și orice aliniere a acestora devine lipsită de sens, deoarece nu există spațiu liber între ele... Dar când flex-direction: coloană , atunci rândurile se mișcă orizontal → și lățimea containerului este aproape întotdeauna mai mare decât lățimea rândurilor și alinierea rândurilor are sens imediat...- elementele sunt întinse pentru a umple linia complet
• - rândurile se întind pentru a umple rândul complet- elementele sunt presate la începutul rândului
• - elementele vor merge de la început (s-ar putea să rămână ceva spațiu la sfârșit).- elementele sunt presate până la capătul rândului
• - elementele sunt aliniate la sfârșit (spațiul va rămâne la început)- elementele sunt aliniate la centrul rândului
• linia de bază- elementele sunt aliniate la linia de bază a textului

Pentru elementele containerului

Setează factorul de mărire al elementului atunci când există spațiu liber în container. Flex-grow implicit: 0 i.e. niciunul dintre elemente nu ar trebui să crească și să umple spațiul liber din recipient.

Creștere flexibilă implicită: 0

• Dacă specificați flex-grow:1 pentru toate elementele, atunci toate se vor întinde în mod egal și se vor umple tot spațiul liber din container.
• Dacă specificați flex-grow:1 la unul dintre elemente, atunci acesta va umple tot spațiul liber din container și aliniamentele prin justify-content nu vor mai funcționa: nu există spațiu liber pentru aliniere...
• Cu flex-grow:1. Dacă unul dintre ele are flex-grow:2 atunci va fi de 2 ori mai mare decât toate celelalte
• Dacă toate cutiile flexibile din interiorul unui container flexibil au flex-grow:3, atunci acestea vor avea aceeași dimensiune
• Cu flex-grow:3. Dacă unul dintre ele are flex-grow:12, atunci va fi de 4 ori mai mare decât toate celelalte

Cum funcţionează asta? Să presupunem că un container are 500 px lățime și conține două elemente, fiecare cu o lățime de bază de 100 px. Aceasta înseamnă că mai sunt 300 de pixeli liberi în container. Acum, dacă specificăm flex-grow:2; , iar al doilea flex-grow: 1; , atunci blocurile vor ocupa toată lățimea disponibilă a containerului, iar lățimea primului bloc va fi de 300px, iar al doilea de 200px. Acest lucru se explică prin faptul că 300px de spațiu liber disponibil în container a fost distribuit între elemente într-un raport de 2:1, +200px pentru primul și +100px pentru al doilea.

Notă: puteți specifica numere fracționale în valoare, de exemplu: 0,5 - flex-grow:0,5

Setează factorul de reducere al elementului. Proprietatea este opusul flex-grow și determină modul în care elementul ar trebui să se micșoreze dacă nu mai rămâne spațiu liber în container. Aceste. proprietatea începe să funcționeze atunci când suma dimensiunilor tuturor elementelor este mai mare decât dimensiunea containerului.

Flex-shrink implicit:1

Să presupunem că containerul are 600px lățime și conține două elemente, fiecare 300px lățime - flex-basis:300px; . Aceste. două elemente umplu complet recipientul. Dați primul element flex-shrink: 2; , iar al doilea flex-shrink: 1; . Acum să reducem lățimea containerului cu 300px, adică. elementele trebuie să se micșoreze cu 300 px pentru a se potrivi în interiorul containerului. Se vor micșora într-un raport de 2:1, adică. primul bloc se va micșora cu 200px, iar al doilea cu 100px, iar noile dimensiuni ale elementelor vor deveni 100px și 200px.

Notă: puteți specifica numere fracționale în valoare, de exemplu: 0,5 - flex-shrink:0,5

Setează lățimea de bază a elementului - lățimea înainte ca alte condiții care afectează lățimea elementului să fie calculate. Valoarea poate fi specificată în px, em, rem, %, vw, vh etc. Lățimea finală va depinde de lățimea de bază și de valorile flex-grow, flex-shrink și conținutul din interiorul blocului. Cu auto, elementul primește o lățime de bază în raport cu conținutul din interiorul său.

Implicit: automat

Uneori este mai bine să setați greu lățimea unui element prin proprietatea obișnuită. De exemplu, latime: 50%; va însemna că elementul din interiorul containerului va fi exact 50%, dar proprietățile flex-grow și flex-shrink vor funcționa în continuare. Acest lucru poate fi necesar atunci când elementul este întins de conținutul din interiorul său, mai mult decât este specificat în flex-basis. Exemplu.

flex-basis va fi „rigid” dacă stretch și shrink sunt setate la zero: flex-basis:200px; flex-grow:0; flex-contractie:0; . Toate acestea pot fi scrise astfel: flex:0 0 200px; .

Un scurt rezumat al celor trei proprietăți: flex-grow flex-shrink flex-basis.

Implicit: flex: 0 1 auto

Cu toate acestea, puteți specifica una sau două valori:

Flex: niciunul; /* 0 0 auto */ /* număr */ flex: 2; /* flex-grow (flex-basis merge la 0) */ /* nu este un număr */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: continut; /* flex-basis: conținut */ flex: 1 30px; /* flex-grow și flex-basis */ flex: 2 2; /* flex-grow și flex-shrink (flex-basis merge la 0) */ flex: 2 2 10%; /* flex-grow și flex-shrink și flex-basis */ align-self:

Vă permite să modificați proprietatea align-items, numai pentru un singur element.

Implicit: din containerul align-items

• întinde- elementul este întins pentru a umple linia complet
• - rândurile se întind pentru a umple rândul complet- elementul este apăsat la începutul liniei
• - elementele vor merge de la început (s-ar putea să rămână ceva spațiu la sfârșit).- elementul este presat până la capătul liniei
• - elementele sunt aliniate la sfârșit (spațiul va rămâne la început)- elementul este aliniat la centrul liniei

linia de bază- elementul este aliniat la linia de bază a textului

Vă permite să schimbați ordinea (poziție, poziție) a unui element din rândul general.

Implicit: comanda: 0

În mod implicit, elementele au ordine: 0 și sunt plasate în ordinea apariției lor în codul HTML și în direcția rândului. Dar dacă modificați valoarea proprietății de ordine, atunci elementele vor fi aranjate în ordinea valorilor: -1 0 1 2 3 ... . De exemplu, dacă specificați ordinea: 1 pentru unul dintre elemente, atunci toate zerourile vor merge mai întâi, iar apoi elementul cu 1.

Astfel, de exemplu, puteți muta primul element până la capăt fără a schimba direcția de mișcare a elementelor rămase sau a codului HTML.

Note

Care este diferența dintre baza flexibilă și lățime?

Mai jos sunt diferențele importante dintre baza flexibilă și lățime/înălțime:

flex-basis funcționează numai pentru axa principală. Aceasta înseamnă că cu flex-direction:row flex-basis controlează lățimea, iar cu flex-direction:column controlează înălțimea. .

flex-basis se aplică numai elementelor flexibile. Aceasta înseamnă că dacă dezactivați flex pentru un container, această proprietate nu va avea niciun efect.

Elementele containerului absolut nu participă la construcția flexibilă... Aceasta înseamnă că baza flexibilă nu afectează elementele flexibile ale unui container dacă sunt poziție absolută: absolută. Ei vor trebui să specifice lățimea/înălțimea.

• Când utilizați proprietatea flex, 3 valori (flex-grow/flex-shrink/flex-basis) pot fi combinate și scrise pe scurt, dar pentru creșterea sau micșorarea lățimii trebuie să scrieți separat. De exemplu: flex:0 0 50% == lățime:50%; flex-contractie:0; . Uneori este doar incomod.

Dacă este posibil, preferați totuși baza flexibilă. Utilizați lățimea numai atunci când baza flexibilă nu este adecvată.

Diferența dintre baza flexibilă și lățime - un bug sau o caracteristică?

Conținutul din interiorul unui element flexibil îl împinge și nu poate depăși el. Cu toate acestea, dacă setați lățimea folosind width sau max-width mai degrabă decât flex-basis , atunci un element din interiorul unui container flexibil se va putea extinde dincolo de limitele acelui container (uneori acesta este exact comportamentul pe care îl doriți). Exemplu:

Exemple de layout Flex

Nicăieri în exemple nu sunt folosite prefixe pentru compatibilitatea între browsere. Am făcut acest lucru pentru a citi ușor css. Prin urmare, consultați cele mai recente versiuni de Chrome sau Firefox pentru exemple.

# 1 Exemplu simplu cu aliniere verticală și orizontală

Să începem cu cel mai simplu exemplu - alinierea verticală și orizontală în același timp și la orice înălțime de bloc, chiar și cauciuc.

Sau așa, fără un bloc înăuntru:

#1.2 Separarea (ruperea) între elementele blocului flexibil

Pentru a poziționa elementele containerului de-a lungul marginilor și a selecta aleatoriu un element după care va exista o pauză, trebuie să utilizați proprietatea margin-left:auto sau margin-right:auto.

#2 Meniu adaptiv pe flex

Să creăm un meniu chiar în partea de sus a paginii. Pe un ecran lat ar trebui să fie în dreapta. În medie, aliniați-vă la mijloc. Iar pe cel mic, fiecare element trebuie să fie pe o linie nouă.

#3 Adaptive 3 coloane

Acest exemplu arată cum să faceți rapid și convenabil 3 coloane, care, atunci când sunt restrânse, se vor transforma în 2 și apoi în 1.

Vă rugăm să rețineți că acest lucru se poate face fără a utiliza regulile media, totul este pe flex.

Accesați jsfiddle.net și modificați lățimea secțiunii „rezultat”.

#4 Blocuri adaptive folosind flex

Să presupunem că trebuie să scoatem 3 blocuri, unul mare și două mici. În același timp, este necesar ca blocurile să se adapteze la micile ecrane. Facem:

Accesați jsfiddle.net și modificați lățimea secțiunii „rezultat”.

#5 Galerie cu flexibilitate și tranziție

Acest exemplu arată cât de repede puteți face un acordeon drăguț cu imagini folosind flex. Acordați atenție proprietății de tranziție pentru flex.

# 6 Flex to Flex (doar un exemplu)

Sarcina este de a face un bloc flexibil. Astfel încât începutul textului din fiecare bloc să fie pe aceeași linie orizontal. Aceste. Pe măsură ce lățimea se îngustează, blocurile cresc în înălțime. Este necesar ca imaginea să fie în partea de sus, butonul să fie întotdeauna în jos, iar textul din mijloc să înceapă de-a lungul unei linii orizontale...

Pentru a rezolva această problemă, blocurile în sine sunt întinse cu flex și setate la lățimea maximă posibilă. Fiecare bloc intern este, de asemenea, o structură flexibilă, cu o axă rotită flex-direction:coloană; iar elementul din mijloc (unde este textul) este întins flex-grow:1; pentru a umple tot spațiul liber, așa se obține rezultatul - textul începea cu o singură linie...

Mai multe exemple

Suport browser - 98,3%

Desigur, nu există suport complet, dar toate browserele moderne acceptă modele flexbox. Unele încă necesită prefixe. Pentru o imagine reală, să ne uităm la caniuse.com și să vedem că 96,3% dintre browserele folosite astăzi vor funcționa fără prefixe, cu 98,3% folosind prefixe. Acesta este un indicator excelent pentru a utiliza cu încredere flexbox.

Pentru a ști ce prefixe sunt relevante astăzi (iunie 2019), voi da un exemplu al tuturor regulilor flexibile cu cu prefixele necesare:

/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical -ms-flex-wrap:wrap -webkit-box-pack; :justify; align-content:space-around ) /* Elemente */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; -ms -flex-negativ:2 -ms-flex-preferred-size:1 2 align-self:center; :3; ​​-ms-flex-order:2);

Este mai bine dacă proprietățile cu prefixe merg înaintea proprietății originale.
Această listă nu conține prefixe care nu sunt necesare astăzi (după caniuse), dar în general există mai multe prefixe.

• (nou) - sintaxă nouă: display: flex; .
• (tweener) - vechea sintaxă neoficială din 2011: afișaj: flexbox; .
• (vechi) - sintaxa veche din 2009: afisare: caseta;

Video

Ei bine, nu uitați de videoclip, uneori este și interesant și de înțeles. Iată câteva dintre cele populare:

Link-uri utile pe Flex

flexboxfroggy.com - joc educațional flexbox.

Flexplorer este un constructor vizual de cod flexibil.

Salutare tuturor! La începutul anului 2018, conform site-ului Pot folosi, aspect pe flexbox, este 97,8% acceptat de browsere. Aceștia sunt indicatori excelenți pentru această tehnologie departe de nouă pentru aspectul site-ului. Acum nu există niciun motiv pentru care să nu folosiți această metodă convenabilă de aspect. Ce vom face acum?

După ce am creat mai multe machete pe Flexbox CSS, nu vreau să mă întorc la cele învechite plutireși chiar la un cadru atât de preferat printre designerii de layout ca Bootstrap. Deşi, Bootstrap Este prea devreme pentru a-l anula, deoarece folosind faimoasa sa grilă, nu trebuie să vă faceți griji cu privire la interogările media.

În această lecție vom proiecta un antet de site web cu un tipic meniu adaptiv folosind flexbox CSS metodă.

Antetul este format din trei blocuri logice:

1. Bloc logo
2. Bloc cu meniu făcut pe liste
3. Bloc cu pictogramă și număr de telefon

Aceste trei blocuri vor fi plasate într-un înveliș exterior comun antet, care va face în sine display: flex; pentru trei blocuri.

În interiorul blocului nav, hai să o scriem din nou display: flex; pentru articolele din meniu. În acest fel vom obține flexibilitate atunci când dimensiunea ecranului este redusă, elementele de meniu pot fi aliniate una sub alta.

Pentru o demonstrație clară, vom face totul HTML marcaj pentru antetul site-ului.

+380973457685

Așa va arăta pălăria fără a folosi stiluri, așa ar trebui să fie.

Acum atentie! Este suficient să specificați două blocuri display: flex; iar întregul conținut al antetului va fi desenat într-o linie.

Antet(
display: flex;
}

Antet .menu ul (
display: flex;
}

Așa funcționează flexbox.

Corp (
culoare de fundal: #fff;
font-family: "Open Sans", sans serif;
înălțimea liniei: 1,5;
}

Antet(
chenar: 2px solid #ccc;
display: flex;
flex-wrap: wrap; /*rupere de linie */
justificare-conținut: spațiu-între; /*apasă conținutul până la margini */
alinierea elementelor: centru; /*aliniază elementele vertical la centru */
}

Header.logo (
padding-stânga: 30px;
}

Antet .menu ul (
display: flex;
stil de listă: niciunul;
}

Antet .menu ul li (
marjă: 20px 10px;
}

Antet .menu ul a (
text-transform: majuscule;
text-decor: niciuna;
greutatea fontului: bold;
culoare: #06a327;
}

Telefon (
dimensiunea fontului: 110%;
culoare: #333;
padding-dreapta: 40px;
}

Lucrăm la adaptabilitatea antetului

Esența procesului de adaptare a site-ului este găsirea punctelor de control în care elementele site-ului să nu fie vizibile sau să arate neglijent. Sarcina noastră atunci când comprimăm browserul în lățime este să vedem problema și să o rezolvăm adăugând codul corespunzător (interogare media) la fișierul de stil.

De exemplu, pe o lățime a ecranului de 900 de pixeli, blocul cu telefonul este apăsat pe marginea din stânga a antetului.

În această postare vreau să arăt o modalitate de a implementa un meniu orizontal receptiv folosind Flexbox. Această metodă de implementare a meniului este folosită pe site-ul web Warface Hub, dar cu o structură puțin diferită și O mai multe fluiere.

Acum aproximativ un an, m-am trezit într-o companie unde mi-au spus o frază minunată: „Mai întâi facem totul folosind CSS, apoi adăugăm doar JavaScript”. Sfatul mi s-a părut bun și l-am urmat. Dar, după cum se întâmplă, m-am lăsat dus de cap. Acum mi-a revenit că nu trebuie făcut totul cu această abordare.

Și așa, mai aproape de subiect. Am început să studiez și să implementez.

Goluri

1. dobândiți abilități de bază în lucrul cu proprietățile Flexbox;
2. dezvoltarea unui meniu adaptativ orizontal;
3. Aplicați soluția rezultată în proiect.

Instrumente și documentație

1. NPM – ca manager de pachete (acum ne mutăm activ la Yarn)
2. Grunt este un instrument care vă va ajuta să vă construiți proiectul
3. Documentația Flexbox (vezi Link-uri utile);

Structura

Pentru a organiza structura stilului pentru meniu, am folosit conceptul descris. Autorul acestui concept sugerează împărțirea tuturor descrierilor de stil în mai multe părți:

• aspect– descrie poziția componentelor și elementelor pe pagină;
• componentă– descrie afișarea și comportamentul elementelor care sunt incluse în componentă;
• element– descrie afișarea și comportamentul unui singur element;

• Baza- descrierea constantelor, stilurilor de bază (ca în normalize.css)
• Componentă- descrierea componentelor aplicatiei. În cazul nostru, componenta „Meniu”.
• Element- descrierea stilurilor pentru elemente precum buton, link etc.
• Aspect- descrierea locației blocurilor pe pagină
• stil.scss- în acest fișier vom pune totul împreună

Etichete de intrare și etichete CSS și HTML

Textul 1 Textul 1
În acest exemplu, puteți observa că atunci când faceți clic pe etichetă, veți obține intrarea selectată. Nu este nimic special în asta (vezi), dar cel mai interesant lucru vine de la selectoarele CSS.

Intrare: bifat (culoare chenar: roșu; )
Acest selector CSS va fi procesat numai atunci când este selectată intrarea (vezi :verificat)

Al doilea lucru la care trebuie să acordați atenție în selectoarele CSS este selecția următorului element (vezi Selectoare de frați adiacente și Selectoare de frați generali). Adică putem selecta următorul element după cel curent.

Intrare: bifat + .label (culoare: roșu; )
În acest exemplu, obținem următorul comportament: când este selectat un element cu clasa de intrare, următorul element cu clasa de etichetă va fi schimbat în conformitate cu stilurile descrise.

Acum toate acestea pot fi combinate împreună.

Structura meniului cu un singur element

1. Fiecare element name=menu-item-trigger, cu excepția primului din starea :checked, va schimba vizibilitatea și pozițiile elementelor ulterioare label.menu-item-close și div.menu-sub, astfel încât label.menu-item-close elementul este complet suprapus cu elementul label.menu-item-label, iar div.menu-sub a apărut sub elementul label.menu-item-label. Adică deschidem un submeniu și schimbăm comportamentul când facem clic pe meniul principal;
2. Primul element name=menu-item-trigger va fi folosit doar pentru a anula toate modificările aplicate în paragraful anterior, adică pentru a închide submeniul;

Un element de meniu selectat:

După astfel de manipulări, tot ce rămâne este să ascunzi elementele de intrare.

Flexbox

Asistența este oferită prin adăugarea de prefixe (postcss) și stiluri de scriere separată pentru un anumit browser.

Flexbox facilitează obținerea capacității de răspuns. Este suficient să descrii containerul, dar uneori va fi necesar să rezolvi problemele cu conținutul din interior. De exemplu:

• elemente de meniu cu cuvinte lungi precum „bază de cunoștințe” și traducerea sa în germană „Wissensdatenbank”. În acest caz, se adaugă un element de împachetare pentru text, căruia i se aplică următoarele stiluri:

  Etichetă-text ( // @link: http://htmlbook.ru/css/text-overflow overflow: ascuns; text-overflow: puncte suspensive; lățime: 100%; afișare: inline-block; )

• Imagini care trebuie întinse în lățime, dar la setarea lățimii: 100%; se extind dincolo de blocul părinte. Dimensiunea cutiei va ajuta aici: border-box; pentru acest element;
• De asemenea, pot apărea probleme cu elementele copil care nu ocupă toată lungimea posibilă sau nu sunt distribuite uniform. flex: 1 1 auto ar putea ajuta aici.

Meniu (afișare: flex; aliniere elemente: centru; flex-wrap: wrap; )
Fiecare element din container trebuie să fie stilat astfel încât să umple tot spațiul posibil și să alinieze conținutul în sine vertical în centru:

Element de meniu (flex: 1 1 automat; afișare: flexibil; direcție flexibilă: coloană; elemente de aliniere: stretch; )

O afișare mai frumoasă a meniului poate fi realizată folosind