Opprett auto-resizing Elements med Scalable.js

Hvis du trenger det Lag fleksible elementer som automatisk fyller beholderne Jeg vil anbefale skalerbar. Dette gratis open-source JS-skriptet er perfekt for å skape en væskedesign uten mye stress.

Alt i biblioteket Scalable.js er formbar slik at du kan endre hver container stil, størrelse, posisjon og internt innhold. Trenger du elementer som er justert til toppen eller bunnen av siden? Skalerbar har muligheter for det.

Ta en titt på GitHub repo for å lære mer om hvordan dette fungerer.

I sin mest grunnleggende form tar dette skript et mål sideelement sammen med noen alternativer for å tilpasse skjermen. Her er noen eksempler tatt direkte fra GitHub:

var skalerbar = ny skalerbar (containerEl, alternativer);

Naturligvis er den første parameteren hvilket containert element du målretter mot (ideelt sett a

eller noe lignende).

Alternativparameteren bør ta en rekke nøkkel => verdipar. Disse alternativene inkluderer beholderhøydeverdier, min og maks bredder, sammen med min og max skalaer (dvs. hvor mye det kan skalere med de indre elementene).

Ta en titt over hovedprosjektsiden for en brukbar demo. Du kan dra hjørner av beholderen for å automatisk endre størrelsen på det fleksible elementet inni. Dette er ganske kult siden under det området du finner brukbar kode tatt direkte fra siden.

Det finnes måter å håndtere fleksible elementer med bare ren CSS. Disse metodene kan imidlertid føles datert, og de tilbyr ikke så mye kontroll som JavaScript.

Hvis du vil prøve dette ut, ta bare en kopi fra GitHub og se hva du synes.

Skalerbar er fortsatt i aktiv utvikling, men det er et enkelt skript å redigere for dine behov.