Una dintre noile caracteristici incredibil de utile ale specificației CSS Grid Layout este funcția minmax (). Această funcție ne deschide posibilitatea de a scrie CSS mai puternic și mai concis, permițându-ne să setăm valoarea pentru banda de rețea la o funcție care include atât valorile minime, cât și cele maxime.
Funcția minmax ()
Funcția minmax () are doi parametri, o valoare minimă și o valoare maximă.
Dacă valoarea maximă specificată este mai mică decât valoarea minimă, aceasta este ignorată și funcția este percepută ca reprezentând numai valoarea minimă.
Funcția minmax () are 6 tipuri de valori:
Să luăm în considerare exemplele fiecăruia.
Probabil cea mai simplă valoare pe care o putem folosi cu funcția minmax () este lungimea obișnuită. Luați, de exemplu, această rețea simplă, cu trei coloane și un rând.
Folosind funcția minmax (), putem specifica că celula galbenă a grilei este între 100px și 200px. Dacă redimensionați fereastra, valoarea absolută se va schimba, dar întotdeauna între aceste limite.
Cea de-a doua și a treia coloană sunt comprimate și extinse până când spațiul liber rămas este egal, dar primul rămâne întotdeauna la o lățime de 100px la 200px.
În plus față de unitățile obișnuite de lungime, cu funcția minmax () puteți folosi procentele. Să spunem, de exemplu, că am dorit ca o celulă galbenă să ocupe maximum 50% din grilă, dar să nu se micșoreze mai puțin de 200 de pixeli.
Indiferent de modul în care îngustăm fereastra browserului, celula galbenă nu va fi niciodată mai mică de 200 de pixeli. Dar când locul este acolo, acesta se întinde până la o jumătate de lățime a grilajului.
Dimensiuni flexibile
Dimensiunile flexibile reprezintă o nouă unitate, introdusă și prin specificația CSS Grid Layout, precum funcția minmax (). Aceasta este valoarea pentru care se folosește unitatea fr. este proporția spațiului liber din recipientul de rețea. De exemplu, să spunem că avem o grilă cu o lățime de 100px cu două coloane. O coloană are o lățime fixă de 20 pixeli. în timp ce cealaltă are o lățime de 1fr. Cea de-a doua coloană va avea de fapt o lățime de 80 de pixeli. Pentru că ocupă tot spațiul liber rămas în grilă.
În acest moment, unitatea fr poate fi utilizată numai pentru valoarea maximă a funcției minmax () (deși se menționează în caietul de sarcini că în viitor este posibil să se aplice pentru valoarea minimă). Revenind la exemplul nostru, puteți specifica faptul că celula noastră galbenă trebuie să aibă o lățime de cel puțin 200 de pixeli. Dacă fereastra browserului devine mai lată decât aceasta, această celulă ar trebui să fie 1fr. și anume este egal cu alte două coloane.
Deoarece pentru ferestrele mari dimensiunile lățimii tuturor coloanelor sunt 1fr, ele împart spațiul în grilă în mod egal.
max conținut
Conținutul maxim de cuvinte cheie este o valoare specială care reprezintă "dimensiunea ideală" a celulei. Aceasta este cea mai mică dimensiune posibilă a celulei la care conținutul se potrivește liber în ea. De exemplu, dacă conținutul unei celule este o propoziție de text, lungimea ideală a celulei este lungimea totală a acestei propoziții, dacă o scrieți într-o singură linie fără a fi asociată cu o despărțire.
Dacă luăm exemplul nostru anterior, să indicăm atât celula galbenă a grilei, cât și dimensiunea minimă și maximă egală cu conținutul maxim.
După cum puteți vedea, coloana este întinsă la lățime pentru a se potrivi întregii lungimi a șirului. Deoarece valorile maxime și minime sunt indicate de conținutul maxim. lățimea coloanei rămâne constantă (rețineți că transferul aceluiași efect ar putea fi obținut fărăminmax, specificând pur și simplu grilă-șablon-coloane: max-content 1fr 1fr).
min conținut
Cuvântul cheie este min-conținut. precum și conținutul maxim - o valoare specială. Este cea mai mică dimensiune posibilă la care celula nu se confruntă încă cu supraîncărcare, dacă aceasta poate fi evitată cumva.
Pentru a arăta diferența dintre conținutul min și conținutul maxim. puteți lua conținutul din exemplul anterior, dar în ambele valori pentru funcția minmax () înlocuiți conținutul min.
Se poate observa că conținutul celulei este transferat astfel încât să ocupe cât mai puțin spațiu posibil pe orizontală, fără a cauza supraîncărcare.
În cele din urmă, avem auto. În funcție de utilizarea acesteia ca valoare maximă sau minimă în funcția minmax (). sensul său se schimbă.
Dacă funcția auto este folosită ca maxim, este echivalentă cu valoarea maximă a conținutului. Și dacă, cel puțin, valoarea auto este cea mai mare dimensiune minimă pentru celulă. Această "dimensiune minimă minimă" diferă de valoarea conținutului min și este specificată de proprietățile min-width / min-height.
Ca o ilustrare, acest lucru se întâmplă dacă setăm auto-pentru cel minim și maxim în celula galbenă din exemplul nostru.
Folosind funcția minmax (). design sensibil fără expresii media
După cum am văzut, utilizarea funcției minmax () este potrivită în mai multe cazuri și poate fi folosită în mai multe moduri. Dar, probabil, cea mai populară și mai utilă utilizare a funcției minmax () este abilitatea de a crea planuri receptive fără ajutorul oricărei expresii media.
Luați de exemplu această rețea:
Fiecare coloană din rețea are o lățime minimă de 200 pixeli. Când redimensionați fereastra browserului, numărul de coloane se modifică pentru a se potrivi lățimii lor ideale. Cu ajutorul funcțiilor CSS-grid și minmax () aceasta se face numai cu 2 linii de CSS:
În plus față de funcția minmax (). aici sunt două puncte cheie:
- repetați (). această funcție ne permite să specificăm aceeași valoare pentru mai multe coloane din rețea. Este nevoie de două valori: numărul de repetări și valoarea care trebuie repetată.
- auto-fit. acest cuvânt cheie poate fi folosit cu funcția repeat () în loc de numărul de repetări. Modifică în mod flexibil numărul de coloane utilizate, în funcție de lățimea fiecăruia dintre ele.
Adevărat, unul, în opinia mea, o limitare serioasă a acestei tehnici este că funcționează numai cu aceeași lățime a tuturor coloanelor. Suntem obligați să folosim funcția de repetare () cu cuvântul cheie auto-potrivire. deoarece acest lucru face posibilă reducerea numărului de coloane. Totuși, aceasta poate fi o soluție foarte utilă în circumstanțele potrivite.
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima schimbare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
Din Paris (în fotografie), unde a avut loc recent întâlnirea grupului de lucru CSS, au apărut știri interesante: proprietățile din grilă și decalajul dintre grilă și coloană, precum și diferența dintre ele ...
Articole similare
Trimiteți-le prietenilor: