A minmax () függvény működése
A CSS Grid Layout specifikáció egyik hihetetlenül hasznos új jellemzője a minmax () függvény. Ez a funkció lehetővé teszi számunkra, hogy erősebb és tömörebb CSS-t írjunk, lehetővé téve számunkra, hogy a rácsszalag értékét egy olyan függvényre állítsuk be, amely tartalmazza a minimális és maximális értékeket is.
A minmax () függvény
A minmax () függvény két paramétert, egy minimális értéket és egy maximális értéket tartalmaz.
Ha a megadott maximális érték kisebb, mint a minimális érték, figyelmen kívül hagyja, és a függvény csak a minimális értéket jelöli.
A minmax () függvény 6 típusú értéket vesz fel:
Tekintsünk példákat mindegyikre.
Valószínűleg a legkisebb érték, amit a minmax () függvénnyel lehet használni, a szokásos hosszúság. Vegyük például ezt az egyszerű rácsot, három oszlop és egy sor.
A minmax () függvény használatával meg lehet adni, hogy a sárga rács cellája 100px és 200px között van. Ha átméretezi az ablakot, az abszolút érték változik, de mindig a fenti határok között.
A második és a harmadik oszlop összenyomódik és kibővül, amíg a fennmaradó szabad terület egyenlő, de az első mindig 100px-200px szélességig marad.
A szokásos hosszúságok mellett a minmax () függvény segítségével a százalékokat is használhatjuk. Tegyük fel például, hogy sárga rácscellát akartunk elfoglalni a rács legfeljebb 50% -át, de nem kevesebbet, mint 200 px.
Nem számít, hogy miként szűkítjük a böngészőablakot, a sárga cella soha nem lesz kevesebb, mint 200px. De ha ott van a hely, a rács szélességének legfeljebb felére nyúlik.
Rugalmas méretek
A rugalmas méretek egy új egység, amelyet a CSS Grid Layout specifikáció is bevezet, mint a minmax () függvény. Ez az az érték, amelyre a fr egységet használják. a rács tartályban lévő szabad terület aránya. Például mondjuk, hogy van egy 100px szélességű rács, két oszlopmal. Az egyik oszlop szélessége 20px. míg a másik szélessége 1fr. A második oszlop ténylegesen 80px szélességű. Mert felveszi az összes szabad helyet a hálózatban.
Jelenleg a fr egység csak a minmax () függvény legnagyobb értékére használható (bár a specifikációban megemlítjük, hogy a jövőben lehet alkalmazni a minimális értékre). Visszatérve a példánkra, megadhatja, hogy a sárga cellánk legalább 200 képpont legyen széles. Ha a böngészőablak szélesebb, akkor ez a cella 1fr. azaz egyenlő két másik oszlopmal.
Mivel nagyméretű ablakméretek esetén az összes oszlop szélessége 1fr, egyenlő arányban osztják el a helyet a rácsban.
max-tartalom
A kulcsszó maximális tartalma egy speciális érték, amely a cellának "ideális mérete". Ez a legkisebb cellatömeg, amelyen a tartalom szabadon illeszkedik. Például, ha egy cella tartalma egy szövegmondat, akkor a cella ideális hosszúsága a mondat teljes hossza, ha egy elválasztás nélkül írja le egy sorba.
Ha a korábbi példát vesszük, jelezzük mind a sárga rácshálózatot, mind pedig a minimális és maximális méreteket, amelyek max.
Amint láthatja, az oszlop szélessége szélesebb lesz, hogy befogadja a húr teljes hosszát. Mivel mind a maximális, mind a minimális értéket max-tartalom jelzi. az oszlop szélessége állandó marad (megjegyezzük, hogy ugyanazon effektus átvitelét without minmax-el lehet elérni, egyszerűen grid-template-columns megadva: max-content 1fr 1fr).
min-tartalom
A kulcsszó min-tartalom. valamint a max-tartalom - különleges érték. Ez a legkisebb lehetséges méret, amelyen a sejt még nem tapasztal túlcsordulást, ha ezt a túlcsordulást valahogy elkerülhetjük.
A különbség a min-content és a max-content között. akkor az előző példa tartalmát veheti át, de a minmax () függvény mindkét értékében helyettesíti a min-tartalmat.
Látható, hogy a cella tartalma átkerül, hogy a lehető legkevesebb teret foglalja el vízszintesen, anélkül, hogy túlcsordulna.
Végül is van autó. Attól függően, hogy a minmax () függvény maximális vagy minimális értéke. jelentése megváltozik.
Ha az autót maximálisan használják, akkor ez egyenlő a maximális tartalom értékével. És ha minimális, az auto értéke a cellának a legkisebb minimális mérete. Ez a "legnagyobb minimális méret" különbözik a min-tartalom értékétől és a tulajdonságok min-width / min-height tulajdonságai határozzák meg.
Illusztrációként ez történik, ha a példánkban a sárga rácscellában a minimális és a maximális értéket automatikusan állítjuk be.
A minmax () függvény használata. érzékeny kialakítás média kifejezés nélkül
Mint láttuk, a minmax () függvény használata számos esetben alkalmazható, és többféleképpen is alkalmazható. De talán a minmax () függvény legkedveltebb és leghasznosabb használata az a képesség, hogy érzékeny elrendezést hozzon létre semmilyen média kifejezés nélkül.
Vegyük például ezt a rácsot:
A rács minden oszlopának minimális szélessége 200px. Amikor átméretezi a böngészőablakot, az oszlopok száma megváltozik az ideális szélességüknek megfelelően. A CSS-rácsok és a minmax () függvény segítségével ezt csak két sor CSS teszi:
A minmax () függvény mellett. itt még két kulcsfontosságú pont:
- ismétlés (). ez a funkció lehetővé teszi számunkra, hogy ugyanazt az értéket adjuk meg a rács több oszlopának. Két értékre van szükség: az ismétlések száma és az ismétlődő érték.
- auto-fit. ez a kulcsszó az ismétlés () függvénnyel használható az ismétlések szám helyett. Rugalmasan megváltoztatja az alkalmazott oszlopok számát, mindegyik szélességétől függően.
Igaz, az egyik, véleményem szerint komoly, korlátozza ezt a technikát, hogy csak akkor működik, ugyanolyan széles az összes oszlop. A repeat () függvényt arra kell kényszerítenünk, hogy a kulcsszó automatikusan illeszkedjen. mivel ez lehetővé teszi az oszlopok számának rugalmasságát. De mégis, ez nagyon hasznos megoldás a megfelelő körülmények között.
Ui Ez is érdekes lehet:
Kevesebb, mint hat hónap telt el a W3C munkafolyamatának utolsó változása óta, mivel a konzorcium vezetője kapott javaslatot, hogy végül alkalmazzák ezt az új folyamatot. És írd le az irreleváns HTML-specifikációkat a múzeumban, hogy ne zavarják a fejlesztőket, hogy "relevánsak legyenek".
Egy másik CSS modul, amelyről beszéltünk, észrevehetetlenül érlelte a státuszát, amellyel a W3C azt tanácsolja, hogy elkezdje az új termékek napi használatát. A tartalom tulajdonság lehetővé teszi, hogy korlátozza a renderelési fa változásait, átírja a CSS mezőket, és átméretezze őket az elemen belül. Ezért nagyon fontos ...
TÖBB
Párizsból (a fotón), ahol nemrégiben került sor a CSS munkacsoport ülésére, érdekes hírek érkeztek: a grid-row-gap és a grid-column-gap properties, valamint a grid-gap ...