Share
Nu este nimic deosebit de impresionant în ceea ce privește orientarea orizontală a conținutului; l-ai făcut de ani de zile. Dar ce zici de centrarea verticală a conținutului dvs. cu înălțime variabilă? În acest videoclip de la cursul meu, 6 proiecte Flexbox pentru designeri web, veți afla cum Flexbox abordează această problemă cu efort minim.
În acest tutorial, vă voi arăta cât de ușor este să utilizați modelul Flexbox pentru a centra pe orizontală și verticală orice piesă de conținut pe care doriți să o centrați.
Începeți prin a trece la stiloul de pornire pentru acest proiect pe CodePen și faceți clic pe Furculiţă pentru a deschide o copie nouă. Vom face modificările la această copie nouă.
Să ne uităm mai întâi la HTML.
Deci, ceea ce avem aici este un banner, și totul este conținut într-un div cu o clasă de stindard. În interiorul nostru avem un alt div cu o clasă de banner text. Și apoi avem unul h1, h3, și h6 element care conține tot textul nostru. Deci, toate cele trei elemente de text sunt cuprinse în acest div care are o clasă de banner text.
Apoi, în CSS, am creat bannerul.
Dacă mergem la stindard , am setat culoarea textului pe alb. Am creat o imagine de fundal. Am poziționat-o, am dimensionat-o și am stabilit înălțimea la 300 de pixeli. Și am aplicat câteva stiluri celor trei elemente de text care se află în interiorul bannerului nostru, al nostru h1, h3, și h6.
Am setat marjele la zero, astfel încât acestea să fie frumoase și confortabile una lângă cealaltă și am stabilit o umbră de text în spatele acestui text. Și apoi există și alte reguli pe care le puteți privi.
Ceea ce vreau să vă arăt în acest moment este modul în care eu folosit pentru alinierea verticală și orizontală a textului nostru.
Alinierea orizontală a textului nostru este foarte ușor de făcut. Așadar, am putea intra în regula pentru cele trei titluri ale noastre, h1, h3 și h6, în interiorul bannerului nostru și pur și simplu setați aliniere text la centru.
Partea greu este centrat vertical pe textul nostru.
Dacă aveți doar o singură linie de text, puteți să o centrați cu ușurință vertical, stabilind înălțimea liniei să aibă aceeași înălțime ca și containerul. Deci containerul nostru este banner-ul în sine, care are o înălțime de 300 de pixeli, deci dacă avem doar o singură linie de text, putem seta înălțimea liniei la 300 de pixeli și textul va fi centrat pe verticală.
Dar dacă aveți mai multe linii de text? Ce se întâmplă dacă aveți un paragraf de text? Dacă aveți un amestec de text și imagini și doriți ca un întreg bloc de conținut să fie centrat pe verticală?
Ei bine, modul în care obișnuiau să fac asta este doar să-l iau în ochi. Deci aș crea o nouă regulă pentru .banner text și să se joace cu ea puțin, crescând padding-ul la diferite valori diferite până când ar părea corect.
Dar modul de modă veche nu este întotdeauna de încredere, pentru că dacă cineva suprascrie dimensiunile textului dvs. până la punctul în care nu mai este centrat? Nu aveți control total asupra ei în acest fel.
Flexbox ne permite să centrăm pe verticală textul cu mult mai ușor și mai precis decât modul de modă veche.
Când folosim modelul Flexbox, nu avem nevoie nici măcar de o regulă pentru banner text clasă. Tot ce trebuie să facem este să avem de a face cu containerul flexibil, care va fi al nostru stindard clasă.
stindard clasa reprezintă divul care este părintele acelui text. Deci, în interiorul regulii pentru stindard clasa, o să ne stabilim afişa la contracta.
Apoi, în interiorul nostru stindard regula, după afișare: flex, Să facem câteva lucruri mai multe. Să adăugăm justify-content: centru, care este modul în care vom îndrepta orizontal totul.
Și apoi ultimul lucru pe care trebuie să-l facem este să ne dăm seama cum să centrați lucrurile pe verticală.
Așadar, putem alinia elemente de-a lungul axei principale folosind justifică conținut. Dar putem alinia elemente de-a lungul axei transversale folosind o altă proprietate numită aliniați-elemente.
Dacă am făcut-o flex-start, textul ar apărea în partea de sus. Dacă l-am schimbat flex-end, ar fi în partea de jos. Avem, de asemenea, acces la aceeași valoare centru, care vor centura pe verticală textul nostru.
Deci asta aliniați-elemente proprietate este exact același lucru ca justifică conținut proprietate, dar merge de-a lungul axei transversale în locul axei principale. Atunci când creăm un container cu flex afișare: flex, în mod prestabilit, este setat la un rând în loc de o coloană, astfel încât axa noastră principală să fie axa noastră orizontală. Asa ca justifică conținut va merge de-a lungul axei noastre orizontale, și aliniați-elemente proprietatea merge de-a lungul axei transversale, care este, în acest caz, axa verticală.
Iată cum arată în final:
Puteți găsi codul pentru efectul finalizat pe CodePen.
Modelul CSS Flexbox începe să vadă o utilizare mai răspândită și este acum acceptat în toate browserele importante. În cursul complet, 6 proiecte Flexbox pentru web designeri, vom construi cursul meu anterior CSS: Flexbox Essentials și vom sublinia șase proiecte CSS practice pentru utilizarea de zi cu zi.
De asemenea, am construit un ghid cuprinzător care vă ajută să învățați CSS online, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat. Check out CSS Learn: Ghid complet.
Accentsconagua