Conţinut
- Design de generație următoare
- Elemente flexibile
- Rânduri și coloane
- Elemente de centru
- Axa transversală
- Justificați de-a lungul axei principale
- Aliniați mai multe linii
- Umpleți spațiul
- În creștere și micșorare
- Dimensiune de navigare necunoscută
- Coloane cu înălțime egală
- Beneficii Flexbox
- Resurse obligatorii
Ați început să utilizați modulul Layout Box flexibil în proiectele dvs.? Deși modulul există de ceva timp, au existat două bariere majore care împiedică dezvoltatorii front-end să-l folosească ca instrument de proiectare web.
În primul rând, până de curând specificațiile erau în flux și nu existau un sprijin mare pentru aceasta. Astăzi, toate browserele moderne acceptă Flexbox. A doua barieră este că este destul de greu să înțelegi conceptul Flexbox. Deși este super-puternic, există o mulțime de piese în mișcare și poate fi dificil de învățat. Dar capacitatea de a aranja elementele paginii și de a le face să se comporte într-un mod previzibil, pe mai multe dimensiuni de ecran, merită efortul.
În acest articol, vă voi pune în funcțiune cu conceptele fundamentale din spatele flexbox. Înțelegerea acestor concepte de bază va deschide o întreagă lume de aspecte extrem de flexibile și ușor de creat (în special pentru designul web receptiv).
Design de generație următoare
Flexbox este un instrument de nouă generație care vă ajută să creați machete cu CSS; indiferent dacă doriți să amplasați o secțiune a site-ului dvs. web sau să afișați o grilă de elemente media. Vă permite să aliniați cu ușurință, să centrați, să justificați, să scalați și să reordonați elementele de pe pagina dvs., fără a fi nevoie să recurgeți la hacks CSS urât sau dependențe JavaScript fragile.
Flexbox poate înlocui plutitoarele, trucurile de poziționare, aspectele de blocare în linie și aspectele de afișare a mesei chiar - înfiorate -. Dacă v-ați scos vreodată părul întrebându-vă de ce unele machete aparent simple au fost dificile sau chiar imposibile în CSS, veți iubi Flexbox.
Elemente flexibile
Magia Flexbox se află în relația dintre containerul flexibil al părintelui și articolele flexibile ale copiilor. Pentru a prelua controlul deplin asupra Flexbox, trebuie să lăsați deoparte orice idee anterioară de flotări, poziționare și compensare. Acesta este un mod total nou de a vă prezenta pagina.
Setare display: flex; pe un element părinte îl transformă într-un container flexibil și toți copiii săi apropiați vor fi transformați în articole flexibile. După ce ați configurat marcajul, puteți utiliza una dintre numeroasele proprietăți flex disponibile pentru a crea un aspect.
Notă: oricare dintre elementele HTML poate fi un container flexibil sau un element flexibil. Orice :inainte de și :după pseudo-elementele pe care le aveți în containerul flex vor fi tratate ca fiind copii și, prin urmare, articole flexibile de primă clasă.
Rânduri și coloane
Există două axe în Flexbox care controlează modul în care sunt dispuse elementele flexibile de pe pagină: axa principală și axa transversală. În mod implicit, Flexbox este configurat astfel încât axa principală să treacă de la stânga la dreapta (sau opusul, pentru limbile care citesc de la dreapta la stânga), iar axa transversală curge de sus în jos (prezentat mai sus). Înainte de a memora acest lucru, rețineți că acest lucru poate - și se va schimba - cu direcție flexibilă proprietate.
În mod implicit, Flexbox este configurat cu direcție flexibilă: rând; ceea ce înseamnă că articolele circulă pe axa principală de la stânga la dreapta, într-un rând. Putem comuta axa principală astfel încât să curgă de la dreapta la stânga folosind flex-direction: rând-invers (așa cum se arată mai sus).
Pentru a comuta atât axa principală, cât și axa transversală, schimbăm aspectul în direcție flexibilă: coloană;. Aceasta va modifica axa principală și va flexa fluxul articolului de la stânga la dreapta la sus-jos, într-o coloană (deasupra). Putem, de asemenea, să începem de jos și să ne deplasăm în sus prin răsucirea axei principale cu direcție flex: coloană-inversă.
Elemente de centru
Unul dintre cele mai bune lucruri despre Flexbox este că vă permite să vă aliniați conținutul în orice fel doriți - chiar și centrarea verticală este o briză absolută! Există adesea confuzie în jurul alinierii Flexbox, deoarece există trei proprietăți diferite pe care le folosim pentru a modifica alinierea articolelor noastre flex.
Un motiv pentru aceasta este că aceste proprietăți aliniază elementele de-a lungul axei principale și transversale. Deci, în loc să întrebați „cum să centrez ceva pe verticală sau orizontală?”, Trebuie mai întâi să stabiliți ce direcție sunt orientate axele dvs. și apoi să vă dați seama ce proprietate CSS să utilizați pentru a alinia și a centra elementele flexibile pe ele.
În următoarele câteva exemple, voi încerca să îmi centrez perfect articolele. Cu toate acestea, trebuie să știți că fiecare dintre aceste proprietăți are o serie de opțiuni de aliniere. Pentru o listă completă, vă recomand să păstrați la îndemână această referință flexbox CSS-Tricks.
Axa transversală
În mod implicit, elementele flexibile se întind pe întregul container flexibil de-a lungul axei transversale. Dacă dorim să centrăm elemente de-a lungul axei transversale, putem folosi alinia-elemente proprietate pe containerul nostru flex și setați-l la centru (prezentat mai sus).
Pe lângă întinde și centru, putem folosi și flex-start și flex-end pentru a ancora articolele în partea de sus și respectiv în partea de jos. În cele din urmă, avem linia de bază, care va alinia elementele de-a lungul fundului (sau liniei de bază) a textului dvs. Acest lucru este extrem de util atunci când încercați să aliniați elementele cu diferite dimensiuni de font.
Justificați de-a lungul axei principale
Acum avem centrarea funcționând de-a lungul axei transversale - de sus în jos în cazul nostru - trebuie să lucrăm cu centrarea pe axa principală. Pentru aceasta, folosim justify-content: centru (prezentat mai sus).
La fel ca și cu alinia-elemente, putem folosi și flex-start sau flex-end, precum și spațiu între și în jurul spațiului, care va împărți uniform spațiul rămas între elemente. Acest lucru este foarte util atunci când lucrați cu planuri de grilă care nu aduc până la 100% din marjă și lățimi.
Nu uitați, dacă trecem de la valoarea implicită direcție flexibilă: rând; la direcție flexibilă: coloană;, axa principală se poate schimba de la stânga la dreapta la sus-jos. Când trecem la coloană, align-items devine aliniere orizontală în timp ce justify-content devine aliniere verticală.
Aliniați mai multe linii
In timp ce alinia-elemente și justify-content funcționează excelent atunci când aveți un singur rând sau coloană de conținut, lucrurile devin puțin mai complicate atunci când aveți de-a face cu mai multe linii de conținut ca urmare a utilizării flex-wrap: înveliș; pe recipientul flex.
align-content funcționează la fel ca justify-content, dar începe când avem mai multe linii de conținut. Aplicand align-content: centru; ne putem asigura că liniile se vor ancora în mijlocul axei transversale și își vor centra elementele de acolo.
La fel ca și cu justify-content, putem folosi și flex-start, flex-end, spațiu între și în jurul spațiului. Cu toate acestea, de data aceasta se referă la spațiul dintre rândurile sau coloanele de conținut, și nu la elementele flexibile în sine.
Acum, cu doar patru linii de CSS, avem un mod antiglonț de a centra vertical și orizontal toți copiii direcți ai unui container flexibil.
.container {align-items: center; justify-content: centru; align-content: centru; flex-wrap: înveliș; }
Umpleți spațiul
Până în prezent, tot ceea ce am învățat despre aliniere are legătură cu containerul flex și modul în care își aliniază copiii. Cu align-self este posibil să suprascrieți alinia-elemente proprietate setată pe containerul flex prin setarea individuală alinia-sine la flex-start, flex-end, centru, de bază sau întinde.
O altă parte adesea neînțeleasă a flexbox-ului este cum să lucrați cu valori de creștere, reducere și bază. Este util să aruncați încă o dată ideile de grile perfecte pentru pixeli și să acceptați că flexbox-ul este, bine, flexibil.
Fiecărui element flexibil i se poate atribui un flex-cresc, flex-shrink și a flex-bază valoare. Cu aceste valori putem indica dimensiunile noastre ideale și apoi putem specifica modul în care articolele ar trebui să acționeze în situații în care există spațiu suplimentar sau insuficient. De acolo, elementele vor descoperi singuri.
Îmi place să mă gândesc la aceste proprietăți ca:
- flex-cresc: Cum acționez când există spațiu suplimentar disponibil? Cum vor împărți articolele flexibile spațiul rămas?
- flex-shrink: Cum acționez atunci când nu există suficient spațiu pentru toate articolele flexibile? În loc să depășească containerul, cine va renunța la o parte din ei înșiși pentru ca totul să se potrivească?
- flex-bază: În loc să setați o lățime sau o înălțime definită pe elementul dvs., în mod ideal ce lățime (ca un rând) sau înălțime (ca o coloană) va fi?
Rețineți că, deși este posibil să specificați aceste proprietăți individual, veți folosi aproape întotdeauna stenograma flex pentru a specifica crește, micșora și bază valorile dintr-o dată. Verificați videoclipurile de la Flexbox.io pentru o descriere mai detaliată a proprietății de stenografie flex.
În creștere și micșorare
Ideea este că putem seta lățimea sau înălțimea ideală cu valoarea de bază, iar atunci când există spațiu suplimentar disponibil pentru articolele flexibile, flex-cresc proprietatea va decide cât de mult va lua. În mod similar, atunci când nu există suficient spațiu disponibil, proprietatea de micșorare va decide cât de mult va renunța fiecare element (sau „micșorat”).
flex-cresc și flex-shrink proprietățile sunt valori proporționale fără unitate. Acestea descriu cât de mult - în raport cu toate celelalte articole flexibile - elementul va crește sau se va micșora.
Să presupunem că avem două articole flexibile: video și credite. Vom seta videoclipul la flex: 1 1 700px; și creditele pentru flex: 3 3 300px;. Acum părintele ambelor articole este containerul flex și, atunci când are o lățime de 1000 px, lucrurile funcționează perfect: videoclipul ocupă 700px, iar creditele ocupă celelalte 300px.
Ce se întâmplă atunci când containerul flexibil are o lățime de 1500 px? Avem 500 de pixeli în plus cu care să lucrăm, deci unde merge asta? Acolo este flex-cresc începe. Videoclipul este setat la 1, în timp ce creditele sunt setate la 3. Aceasta înseamnă că, din toată camera suplimentară, creditele vor lua de trei ori (375 px) cantitatea de spațiu pe care va primi videoclipul (125 px).
Similaritate, ce se întâmplă atunci când containerul nostru flexibil este mai mic de 1000 px? Să presupunem că are 900 px: cum acționează atunci videoclipul și creditele? Spre deosebire de cele flotante, nu trecem doar pe o nouă linie sau le reducem cu procente. În schimb, folosim flex-shrink proprietate.
Întrucât creditele au flex-shrink din 3 și videoclipul are un flex-shrink din 1, aceasta înseamnă că creditele vor ceda de trei ori mai mult spațiu decât videoclipul. Deci, deoarece trebuie să ne radem 100 px de undeva, creditele vor renunța la 75 px, în timp ce containerul video va renunța doar la 25 px.
Dimensiune de navigare necunoscută
Să vedem câteva cazuri de utilizare obișnuite ale flexbox-ului. Dacă ați lucrat vreodată cu o navigație într-un CMS precum WordPress, veți ști că poate fi greu să preziceți câte elemente vor fi incluse în navigare.
Distribuirea uniformă a spațiului între toate elementele necesită JavaScript. De exemplu, dacă aveți trei elemente, fiecare ar trebui să ocupe 33,33 la sută din lățime, în timp ce cu cinci elemente fiecare ar trebui să ocupe 20 la sută.
Să aruncăm o privire la acest cod frecvent văzut ca exemplu:
ul> li> a href = "#"> Acasă / a> / li> li> a href = "#"> Despre / a> / li> li> a href = "#"> Contact / a> / li> / ul>
Cu flexbox, putem crea cu ușurință această navigație și chiar o putem face receptivă, toate cu doar câteva linii de CSS. Tot ce trebuie să facem este să ne setăm containerul de navigare (de obicei o listă neordonată de articole) la display: flex, și apoi fiecare dintre elementele flexibile la flex: 1 sau flex-grow: 1;.
Aceasta va întinde elementele listei pe orizontală și le va încadra perfect în lățimea disponibilă. Motivul pentru care funcționează atât de frumos este că am setat elementele flexibile să crească 1, ceea ce înseamnă că atunci când rămâne spațiu suplimentar, acesta va fi împărțit uniform între toate articolele.
Pentru mai multe informații despre acest lucru și pentru a afla cum să vă dimensionați diferit elementele de navigare, asigurați-vă că urmăriți tutorialul de navigare receptiv disponibil pe Flexbox.io.
Coloane cu înălțime egală
V-ați dorit vreodată ca CSS să aibă o înălțime: la fel de mare ca cea mai înaltă proprietate a fraților? Am fost cu toții acolo - avem trei coloane de conținut, toate având dimensiuni diferite (mai sus). Conținutul este dinamic, iar site-ul este receptiv, deci setarea unei înălțimi fixe pe fiecare dintre acestea nu poate fi pusă în discuție, iar o corecție JavaScript nu este ideală.
Mai devreme am aflat că implicit pentru alinierea elementelor este stretch. Aceasta înseamnă că articolele flexibile se vor întinde pentru a se potrivi containerului flexibil părinte. Și cum este definită înălțimea containerului flexibil? Aproape întotdeauna după înălțimea celei mai înalte casete de conținut.
Să luăm, de exemplu, următorul markup. Dacă redăm acest lucru cu flotări și lățimi procentuale, vom vedea că containerul este dimensionat de elementul de mijloc și celelalte două sunt la fel de mari pe cât trebuie.
div> div> p> Sunt scurt / p> / div> div> p> Sunt o cutie destul de înaltă, care este cea mai mare / p> / div> div> p> Sunt o cutie de dimensiuni medii / p > / div> / div>
Acum, dacă pur și simplu folosim display: flex; pe containerul flex și setați fiecare element să fie 33,33 la sută cu flex-bază proprietate, imediat articolele flexibile se întind pe întreaga axă transversală, indiferent de cât de mult conține în ele (vezi imaginea de mai sus).
.container {display: flex; } .box {flex: 1 1 33,33%; }
Beneficii Flexbox
Sper că acum veți vedea valoarea învățării modului de utilizare a modulului Flexible Box. Deși nu va rezolva fiecare problemă pe care o aveți cu CSS, este un instrument important pe care fiecare designer și dezvoltator ar trebui să îl cunoască și să îl aibă în arsenalul lor.
A trecut ceva timp de când nu am mai ajuns la CSS ceva atât de mare și aș susține că este una dintre părțile mai dificile de învățat din CSS. Amintiți-vă doar că ați împins deși învățarea plutește, așa că Flexbox este în totalitate ceva ce puteți stăpâni!
Resurse obligatorii
Ce Flexbox ?!
„Ce Flexbox ?!” este un curs de formare gratuit cu 20 de videoclipuri pe care l-am creat. În prima jumătate a cursului, fiecare videoclip introduce un aspect nou al Flexbox. Am păstrat aceste lucruri drăguțe și scurte, astfel încât să le puteți face referire mai târziu, atunci când trebuie să faceți o anumită parte. A doua jumătate a cursului se aruncă într-un exemplu din lumea reală, detaliind modul în care putem folosi Flexbox pentru a rezolva rapid și ușor multe dintre problemele comune de aspect cu care ne confruntăm.
Un ghid complet pentru Flexbox
Odată ce ai obținut blocajul Flexbox, poți lăsa materialele de instruire deoparte. Cu toate acestea, este util să păstrați la îndemână o referință vizuală. Această resursă fantastică de la Chris Coyier descompune fiecare dintre cele 13 proprietăți Flexbox diferite, arătând care se aplică containerului flex și care se aplică direct articolelor flex.
Flexbugs
Flexbox nu este fără greșeală și, ca orice altceva, există o mână de bug-uri și soluții inter-browser despre care ar trebui să știți. Flexbugs prezintă o serie de bug-uri cunoscute Flexbox, precum și oferirea unor soluții și soluții posibile.
