Hogyan készíts fogékony, görgethető paneleket Flexboxszal
Hungarian (Magyar) translation by Bózsó Péter (you can also view the original English article)
Ha kitartottál a ZURB munkával amit az Alapok az Alkalmazásaidhoz-zal csináltál, talán észrevetted, hogy a legtöbb demo sablonuknak nagyon csinos, görgethető panelük van.



Ezek valójában nagyon hihetetlenek-különösen hibrid alkalmazásokhoz. Emlékezz, hogy milyen praktikus kerek voltak, mielőtt kimentek a divatból? Hát, most visszahozhatod ezt a funkcionalitást, de egy fogékony módon.
Némi bóklás után, képes voltam kinyomni az alap funkcionalitásait ezeknek a paneleknek és ez az amit meg fogunk tanulni, hogyan csináljuk újra ma.
1. Kezdjük az elején
Néhány nagyon alap jelöléssel fogunk kezdeni. A legfontosabb rész egy csomagoló konténer, hogy becsomagoljuk az egész oldaladat.
<div class="wrap"> <main> <aside> <h1>Sidebar</h1> <p> lipsum... </p> </aside> <article> <h1>Content</h1> <p> lipsum... </p> </article> </main> </div>
2. CSS
A dolgok érdekessé válnak a CSS-ben nagyon gyorsan. Először, akarjuk a html
és body
kiválasztóinkat, hogy legyenek height:100%
. Azért csináljuk ezt, hogy beállítsuk a .wrap
elemet amit be fogunk állítani height: 100vh
-ra. A vh egységgel azt mondjuk, hogy a néztablak teljes magasságára akarjuk felvinni az alkalmazást , szóval a tartalmazott elemekkel rá lesz erőltetve, hogy gördüljön.
Továbbá beállítjuk a .wrap
et, hogy legyen display:flex
, szóval hozzáadhatunk gyerek elemeket egy flex
ingatlanhoz.
html, body { height: 100%; } .wrap { height: 100vh; display: flex; }
Megjegyzés: A számos szintaxisokra való emlékezés helyett a Flexboxhoz az évek során, próbáld ki az Autoprefixer használatát. Ezután szükséged lesz a W3C speciális szintaxis használatára és ez meg fogja csinálni a támogatás maradék részét annyi böngésző felé amennyi lehetséges.
3. Rugalmassá válás
Most itt van nekünk ez a "héj" beállítás amibe elkezdhetünk stílizálni nagyon alapvető, rugalmas elemeket. Az egyetlen trükk, hogy megbizonyosodj ezek a gyerek elemek beállításáról overflow-y: scroll
-ra, hogy érvényesítesz egy görgetősávot.
main { flex: 1; display: flex; } aside, article { overflow-y: scroll; padding: 2em; } aside { flex: 1; } article { flex: 2; }



4. Fogékonnyá válás
Kerüljünk egy lépéssel közelebb és tegyük az oldalunkat fogékonnyá az oldalsáv felhalmozásával a tartalom terület tetején kisebb eszközöknek. Ez olyan könnyű, mint egy CSS szabály hozzáadása egy média lekérdezésen belül.
@media (max-width: 800px) { main { flex-direction: column; } }



Következtetés
Ezeknek a lépéseknek elégnek kell lenniük, hogy elindítsanak ennek a technikának a használatán a weboldalaidon keresztül. Most már tudom hogyan kell csinálni, megkeresem az összes fajtáját a helyeknek betenni ezeket a görgethető paneleket.
Hogy lásd ezt akcióban működni, nézd meg a demót Codepenen. Továbbá, nézz rá a nem hivatalos Stylus újratervezésre amit építettem ennek a technikának a használatával.



Hogy látod a használatát?