Hogyan készíts fogékony, görgethető paneleket Flexboxszal

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 .wrapet, 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?