Cum funcționează flexboxul
Tehnologia flexbox promite să ne salveze de problemele CSS liniare (de exemplu, alinierea verticală, de exemplu).
În Firefox, puteți încerca deja această tehnologie. Cu toate acestea, stăpânirea unui nou model de poziționare poate să nu fie atât de ușoară.
Să vedem cum funcționează flexboxul, cum îl putem folosi pentru a poziționa mai ușor elementele.
Principiul poziționării flexbox vă permite să construiți în mod flexibil și intuitiv un aspect.
Pentru a realiza acest lucru, permite elementului container în sine să decidă cum să aranjeze elementele copilului.
Toate acestea suna bine in teorie. Dar să vedem cum arată în practică.
În acest articol, vom analiza cele cinci caracteristici cele mai comune ale modelului flexbox. Vom analiza modul în care le puteți folosi și cum vor arăta rezultatele.
Proprietatea 1: afișare: flex
Avem patru elemente colorate diferite, de dimensiuni diferite, toate în același container. În mod implicit, proprietatea de afișare pentru fiecare element este setată să blocheze. Astfel, fiecărui element i se dă o linie pe întreaga lățime.
Pentru a profita de flexbox, trebuie să raportați acest lucru containerului.
Nu prea multe schimbări, elementele aliniate. Dar în spatele scenei a fost mult mai mult. Aceste elemente au primit ceva numit contextul flexibil.
Acum puteți să le poziționați în acest context, cheltuind mult mai puțin efort decât în CSS tradiționale.
Proprietatea 2: direcția flexibila
Containerul are două axe de coordonate, care arată astfel:
În mod prestabilit, copiii sunt aliniați de-a lungul axei principale de la stânga la dreapta. De aceea, elementele din exemplul anterior au fost aranjate orizontal de îndată ce am înregistrat afișajul: container flexibil.
Proprietatea flex-direction vă permite să modificați acest comportament.
O notă importantă: direcția flexibilă: coloana nu aliniază elementele de-a lungul axei minore (axa transversală), ci face axa minoră a axei principale.
Există două valori suplimentare pentru această proprietate: rând-invers și coloană-inversă.
Proprietatea 3: justify-content
Proprietatea justify-content controlează plasarea unui element de-a lungul axei principale.
există 5 valori pentru această proprietate:
Diferența dintre spațiu în jurul și spațiu între este: spațiu între alocă spațiu egal între elementele și spațiul egal de spațiu în jurul în jurul fiecărui element, se schimbă astfel de container.
Amintiți-vă că: justify-content funcționează numai de-a lungul axei principale, iar direcția flex-comută axele. Acest lucru este important pentru următoarea proprietate.
Proprietatea 4: alinierea elementelor
Proprietatea align-items funcționează exact ca justify-content. numai de-a lungul axei minore.
Există 5 valori în total:
Primele trei sunt exact aceleași cu cele ale justificării. așa că nu le vom mai lua în considerare, dar vom trece imediat la celelalte două.
stretch aliniază elementele în înălțime și linia de bază în partea de jos a paragrafului.
Pentru valoarea de întindere. de asemenea, este necesar ca elementele să stabilească înălțimea în auto.
Despre linia de bază. fii atent, dacă nu ai un singur paragraf în elementele, ele vor fi aliniate în partea de jos, după cum urmează:
Pentru a demonstra principiul axelor majore și minore, să proprietăți va combina justifica conținut și aliniați-elemente și a vedea modul în care alinierea diferitelor valori de proprietate flex-direcție.
Cu rândul valorii. elementele sunt aliniate de-a lungul axei orizontale, coloana - verticală.
Proprietatea 5: aliniere
Proprietatea Align-Self vă permite să controlați manual alinierea unui anumit element.
Acesta suprascrie valoarea proprietății de aliniere. Toate valorile sunt exact aceleași ca elementele de aliniere. cu excepția funcției auto, care este setată implicit și înseamnă că trebuie să aliniați așa cum este indicat de container.
Să vedem cum va arăta. Atribuiți alinierea pentru primele două elemente, iar pentru rest vom aplica elemente de aliniere: centru și direcție flexibilă: rând.
concluzie
Desigur, aceasta a fost doar o revizuire a principalelor caracteristici, dar acestea sunt deja suficiente pentru a rezolva majoritatea problemelor cu Layout.
Trimiteți-le prietenilor: