În acest articol, vom analiza modul de utilizare a flexbox pentru a rezolva principalele probleme ale CSS care apar atunci când faceți aspect fără durere.
Flexbox - CSS standard, creat pentru optimizarea procesului de creare a interfețelor utilizator. Folosind proprietățile flexbox-urilor, puteți crea pagini, ca și cum ați adăuga blocuri ușor poziționate și redimensionate în modul de care avem nevoie. Site-urile și aplicațiile create utilizând flexbox sunt în mod implicit adaptive și arată bine pe orice ecran.
La prima vedere, nu pare complicat, dar, de fapt, nu este foarte plăcut să creați coloane în acest fel. Pur și simplu pentru a stabili min-înălțimea este imposibil, ca la creșterea volumului unui conținut în unul dintre ele, înălțimea lui va crește, iar celelalte vor rămâne scurte.
Dacă utilizați flexbox, atunci soluția va fi destul de simplă. Tot ce trebuie este să inițiați flex și să vă asigurați că valorile implicite sunt setate în proprietățile flex-direction și align-items.
/ * Acestea sunt valori implicite, dar pot fi încă setate * /
flex-direcție. rând; / * Elementele din interiorul containerului vor fi poziționate orizontal * /
aliniați-elemente. întinde; / * Elementele din interiorul containerului vor ocupa întreaga sa înălțime * /
<. -- Одинаковые по высоте колонки -->
Se numește o comandă și vă permite să schimbați orice număr de elemente flexibile și să schimbați secvența cu care se află pe ecran. Singurul parametru cu un număr întreg determină poziția elementului, cu atât numărul este mai mic - cu atât este mai mare prioritatea.
Trimiteți-le prietenilor: