„Flexbox“ ir „Grid“ dizainerių vadovas

Ką dizaineriai turi žinoti apie šias pertvarkymo išdėstymo priemones.

CSS nuėjo ilgą kelią nuo jos įdiegimo 1996 m., Tačiau įrankiai, kuriuos turime turėdami išdėstymą, beveik nepasikeitė. Stalų išdėstymas buvo neįtikėtinai per griežtas, plūdės pagrindu išdėstyti iš esmės buvo apgaulingi, padėties nustatymo išdėstymai nebuvo pritaikomi ir nė vienas iš jų negalėjo efektyviai valdyti didelio sudėtingumo. Nesupraskite manęs neteisingai - šie metodai mus pasiekė tikrai toli, tačiau jie nėra skirti sudėtingiems maketams.

Šių senų išdėstymo metodų trūkumai dar labiau išryškėjo reaguojant į žiniatinklio dizainą, kuriame labai svarbu įsisavinti žiniatinklio sklandumą.

Naudodami „flexbox“ ir tinklelį, pagaliau turime specialiai maketui skirtus įrankius, kurie yra efektyvesni ir nėra būtinų įsilaužimų, susijusių su ankstesniais išdėstymo metodais. Jie atveria naujas senų problemų galimybes, įgalina dalykus, kurių anksčiau nebuvo įmanoma padaryti, ir išspręs tikras problemas, su kuriomis susiduriame reaguodami į interneto svetaines.

„Flexbox“

„Flexbox“, taip pat žinomi kaip CSS lanksčios dėžutės, yra naujas išdėstymo metodas, suteikiantis mums suderinimo valdymą, kurio negali suteikti joks kitas CSS metodas. Puikiai tinka „mikro išdėstymas“: galimybė sulyginti, suskirstyti ir paskirstyti erdvę tarp konteinerio elementų arba pakeisti elemento plotį ar aukštį, kad jis geriausiai užpildytų turimą vietą.

Patobulintas vyniojimas

„Responsive Web Design“ programoje galimas plotis skiriasi, nes peržiūros srities plotis keičia dydžius. Tai gali sukelti netyčinį turinio įvyniojimą, ypač kai turinys yra ilgesnis nei skirtas, arba turinio talpykla yra per siaura. Turbūt visi esame matę anksčiau: dizainas atspindi „idealaus“ turinio ilgį, tačiau kai tik jis įgyvendinamas ir pridedamas tikrasis turinys, turinys įvyniojamas į kitą eilutę, nes nebuvo pakankamai vietos arba išeina iš jo konteineris. Abi jos nėra idealios ir gali sugadinti išdėstymus.

Problema nėra ta, kad laisvos vietos visada bus pakankamai daug, kad būtų galima pritaikyti įvairaus ilgio turinį. Tradiciškai mes naudojome CSS laikmenų užklausas, kad koreguotume išdėstymą tam tikruose lūžio taškuose, kad sumažintume turinio įvyniojimo problemas. Bet medijos užklausose neatsižvelgiama į paties turinio ilgį - jos reaguoja į aiškų plotį ar aukštį. Dėl to dažnai kyla per daug žiniasklaidos užklausų, siekiant valdyti konkretų turinį esant aiškiems lūžiams.

Patobulinto vyniojimo su „Flexbox“ pavyzdys

„Flexbox“ išsprendžia šią problemą suteikdama mums galimybę pasinaudoti turima erdve ir apvynioti turinį, kai to nėra. Toks automatinis koregavimas yra ne tik patogus, bet ir pagerina jo priežiūrą, nes mes neturime pasikliauti lūžio tašku, kad rankiniu būdu pakeistume stilių. Aukščiau pateiktas pavyzdys parodo tokį elgesį: parodykite vietos etiketę šalia pavadinimo, jei yra pakankamai vietos, ir suderinkite vietos etiketę kairėje, žemiau pavadinimo, jei nėra pakankamai vietos.

Dėl tradicinių metodų, tokių kaip plūduriuojanti, vietos etiketė būtų likusi dešinėje pagal mažesnių rodinių sritis, o tai yra mažiau nei idealu. Tai galite ištaisyti, plukdydami etiketę į kairę tam tikrame lūžio taške. Šio požiūrio problema yra ta, kad jūs esate priklausomas nuo lūžio taško, kad pakeistumėte savo turinio stilių, kurio ilgis gali skirtis.

Patobulintas tarpas ir suderinimas

Kalbant apie tarpus ir derinimą CSS, mes turėjome būti protingi, kad atliktume bet ką, kas nebuvo numatytasis elgesys. Net ir nereikšmingi efektai CSS srityje gali būti keblūs, pavyzdžiui, vertikalus išlyginimas ar tolygiai paskirstoma erdvė tarp elementų, turi būti pagrįsti problemos ar įsilaužimo problemomis. Kai kurių dalykų visiškai neįmanoma pasiekti.

„Flexbox“ tai išsprendžia įgalindamas paskirstyti vietą tarp nežinomo daiktų skaičiaus nežinomo pločio ar aukščio srityje ir suderinti elementus ant X arba Y ašies. Tai panašu į tai, kaip projektavimo įrankiai, tokie kaip „Eskizas“ ar „Illustrator“, gali valdyti tarpus ir derinimą, įgalindami valdymą, kurio tikimės žiniatinklyje.

Patobulinto erdvės paskirstymo naudojant „Flexbox“ pavyzdys

Puikus šio valdymo pavyzdys gali būti pateiktas aukščiau: navigacijos elementai yra tolygiai paskirstyti, vertikaliai išdėstyti centre, o pirmasis ir paskutinis elementai yra tolygiai prie navigacijos talpyklos krašto. Tai būtų buvę neįmanoma naudojant tradicinius metodus, tokius kaip elementų pritaikymas intarpais arba pasitikėjimas lentelės išdėstymu.

Šaltinio užsakymas

Šaltinio tvarka - tai tvarka, kuria elementai rodomi puslapyje, atsižvelgiant į tai, kur jie yra HTML. Pagal numatytuosius nustatymus elementai bus rodomi iš viršaus į apačią ir iš kairės į dešinę pagal numatytuosius nustatymus - jų plotį lemia jų rodymo ypatybė.

Natūralaus šaltinio dokumento tvarka turėtų padėti jums galvoti apie tai, kaip jūsų dizainas bus pritaikytas įvairiems peržiūros srities plotiams, tačiau kartais yra naudinga jį pakeisti, norint pertvarkyti elementus. Vienintelis būdas tai padaryti prieš „flexbox“ buvo paslėpti elementą ir parodyti kitą, gaunant HTML kopiją arba pasikliauti absoliučia padėtimi, kuri ne visada veikia, kai turinio dydis gali skirtis. Naudodami „flexbox“, galite tiesiog modifikuoti „flex“ elementų tvarką, nereikia modifikuoti pagrindinės HTML struktūros.

Prekės užsakymo naudojant „Flexbox“ pavyzdys

Aukščiau pateiktas pavyzdys rodo užsakymą „Flexbox“: kairėje poraštės pusėje rodome logotipą, kuris atitinka antraštę. Mažuose peržiūros languose vietas rodome prieš logotipą. Šis pertvarkymas yra prasmingas, nes vietos šiame kontekste yra svarbesnės.

Tinklelio išdėstymas

CSS tinklelio išdėstymas yra dvimatė išdėstymo sistema, sukurta specialiai žiniatinkliui. Tai suteikia mums galimybę padalyti puslapį į regionus, kuriuos kiekvienas gali būti toliau apibūdinamas pagal dydį, padėtį ir sluoksnį, todėl gaunamas neįtikėtinai galingas savitasis pagrindas.

Tinka naudoti pagal paskirtį

CSS niekada neturėjo tikro tikslinio išdėstymo įrankio, todėl mes turėjome būti gana išradingi, kaip pritaikyti tinklelį savo darbe. Tinklelio sistemos atsirado siekiant patenkinti šį poreikį, tačiau neminint savų problemų. Daugeliui populiariausių tinklelių schemų reikia žymėti išdėstymą išdėstymu, kuris gali sukelti kodo išsipūtimą, techninės priežiūros problemų ir panaikina dokumentų struktūros ir pateikimo atskyrimą.

Naudojant tinklelį, mums nebereikia tinklelio sistemos - tai savaiminė sistema, iškelta tiesiai į CSS. Tai leidžia mums intuityviai apibrėžti CSS išdėstymą, kartu apimant numatytąjį žiniatinklio sklandumą. Šio naujojo išdėstymo įrankio galimybės yra begalinės, ir tai leidžia mums atlikti išdėstymus, kurie buvo įmanomi tik naudojant „Javascript“ prieš jį atvykstant.

Tinklelio išdėstymo pavyzdys

Naujos kartos interneto išdėstymai

Kalbant apie išdėstymą, mes gana ilgą laiką buvome įstrigę provėžoje. Nustatyti modeliai ir ankstesnių CSS išdėstymo įrankių apribojimai praeityje nuvedė mus į išdėstymo vienodumo kelią. Jums nereikia toli ieškoti žiniatinklyje: antraštė, pagrindinis turinys, šoninė juosta, poraštė.

Atsiradus reaktyviam interneto dizainui, atsirado naujų idėjų, kaip išdėstyti tinklalapį, ir kartu su juo atsiranda gerų šablonų: atitraukite šoninę juostą, supaprastinkite dizainą ir sutelkite dėmesį į turinį. Tačiau mes taip pat matome, kad atsiranda modelių, kurie tapo tokie visur paplitę, kad girdime šaukimą, kad „visos svetainės atrodo vienodai“.

Tinklelio išdėstymas leis mums išeiti iš rėžimo, kuriame mes buvome, ir suteiks mums įrankius, kurių mums reikia naujos kartos maketams kurti. Galiausiai galime susikurti turinį, o ne versti jį į bendrus dizaino modelius, kuriuos galima rasti kiekvienoje kitoje jautrioje svetainėje.

Atsargumo žodis

Svarbu atminti, kad ne visos naršyklės palaiko „flexbox“ ir tinklelio funkcijas. Turime atsižvelgti į tai, kas yra kiekvieno projekto auditorija, ir nustatyti, ar daugumai vartotojų bus naudingos šios sudėtingesnės funkcijos, tuo pačiu suteikiant protingą atsarginių nepalaikomų naršyklių atsargą. Visiškai priimtina senosiose naršyklėse esantiems vartotojams suteikti supaprastintą jūsų UI versiją ir patobulinti ją naujesnių naršyklių vartotojams.

Yra dar daugiau. Daugiau.

Mes subraižėme tik tai, ką gali padaryti „flexbox“ ir tinklelis. Laimei, yra daugybė puikių dokumentų, kuriuose aptariamos šių naujų išdėstymo įrankių galimybės. Štai keletas mano mėgstamiausių:

„Flexbox“

Tinklelis

Kiekvienas, kuris kuria internetą, skaudžiai žino įvairius apribojimus, susijusius su CSS išdėstymu. Dažnai tam reikėjo sukompromituoti dizainą, kad jis veiktų taip, kaip tikėtasi plėtojant, arba, dar blogiau, pasikliaudamas „Javascript“, kad įgyvendintume mums reikalingą elgesį.

Flekso dėžutės ir tinklelio išdėstymo pasirodymas rodo naują išdėstymo erą internete. Turime pasirinkti naują požiūrį, kai reikia išdėstyti, kad neapsiribotume praeities įpročiais, trūkumais ir įsilaužimais. Perimkime šiuos naujus įrankius ir atnaujinkime savo galimybes, naudodami išdėstymą internete.