Flexbox naudojimas CSS ir HTML (Pamoka) – kūrimas atsakomiems išdėstymams

Tave kursų Flexbox CSS ir HTML.

Kas yra lankstusis dėklas ir kodėl jį iš viso reikėtų naudoti?

Čia bus pradėtas projektas, kuriame toliau bus dirbama.

Aš pristatysiu čia pavyzdinę struktūrą ir įtrauktas „VS-Code“ derinimo galimybes su „MS Edge“ įrankiais. Be to, šiame vaizdo įraše pirmą kartą bus įjungta lankstaus dėžutės maketas ir nustatyta kryptis.

Kaip lygiagrečiai arba tam tikrais santykiais padalyti vietą lankstaus dėžės išdėstyme?

Mažas pratimas, kurio metu neįmanoma išvengti trupučio (paprastos) matematikos.

Čia pateikiu horizontalų išdėstymą su dviem šoninėmis juostomis, kuris prisitaiko prie pločio atsakomai.

Kinai gali būti surenkami iš lankstaus konteinerio perjungimo ašį. Čia aš parodysiu, kaip tai galima nustatyti.

Ne tik konteineryje galima nustatyti visų vaikinių elementų išdėstymą, naudojant align-self, tai galima atlikti skirtingai ir su atskirais elementais.

Mažas pratimas individualiam kauliuko nukreipimui.

Ne tik palei kryžiaus ašį galima nukreipti lankstų konteinerį, bet galima nukreipti ir daug kito kryptimi išlyginimui lyginti.

Maža pavyzdį, kaip labai gerai galima naudoti išdėstymą pagal pagrindinę ašį dažnai patiktam išdėstymui.

Kas nori būti lankstus, taip pat turi galėti nurodyti vaiko elementų dydį nepriklausomai nuo konkretaus pločio ar aukščio. Laimei yra flex-basis-savybė, kurią padės pasiekti tiksliai tai. Keičiant flex-direction, iš pločio tampa aukštis ir atvirkščiai. 

Kiek turėtų išsiplėsti elementas, jei yra daugiau vietos nei nurodo flex-basis? Tai galima tiksliai nustatyti naudojant flex-grow.

Kiek elementas turi susitraukti, jei vietos yra mažiau nei nurodo flex-basis? Tai galima kruopščiai nustatyti naudojant flex-shrink.

Kinai gaminiai gali mažėti ne tik tais atvejais, kai yra mažiau vietos, bet taip pat gali būti sudaužyti konteineryje. Kaip tai kontroliuoti naudojant flex-wrap, aš parodysiu šiame vaizdo įraše.

flex-direction ir flex-wrap galima nurodyti kartu savybėje flex-flow. Tai netgi praversta, jei norite nustatyti tik flex-direction, nes flex-flow yra trumpesnė. ;-)

Užduotis dėl flex-wrap.

Atstumas kartais būtinas, norint nepatogumų vengti žmogaus akyse. Laimei, yra gap CSS savybė, kuri tai tiksliai įgyvendina lankstaus konteinerio vaikų elementuose.

Tvarka turi būti, ypač interneto svetainių sąsajose, nes jos turėtų būti lengvai naudojamos. Kartais reikia nustatyti tvarką individualiai, be elementų DOM perkelimo. Tai puikiai tinka CSS savybė order, su kuria galima lengvai pakeisti elementų matomą tvarką.

Pabandykime, ar jūs suvokėte tvarką. Čia netgi yra antra galimybė pasiekti tą patį rezultatą, bet jūs tikrai taip pat supratote.

Labai dažnai būna, kad norime centruoti elementus ir ypač tekstą horizontaliai ir vertikaliai (!). Tai, kas buvo varginantis be lankstesnės dezaino technologijos, su lankstesnės dezaino technologijos yra kaip vaikų gimtadienis.

Kas jo nežino, 3 stulpelas? Jei jis pritaiko prie turimo vietos, tai reiškia, kad trūksta ne daug iki atsako dizaino.

Ar yra svetainių be formų? Jei taip, jų yra nedaug. Todėl labai svarbu, kad jas tvarkingai susitvarkytumėte, dėl ko, dėl laimės, naudojant Flexbox, nėra problemų.

Labai dažnai susiduriama su įvairiopais išdėstymo modeliais, bet naudojant lankstųjį išdėstymą, šie modeliai tampa nebe dideliu iššūkiu.

Tuo tarpu interneto pokalbių klientų yra kaip smėlyje, o su dirbtinio intelekto pokalbių robotais dar daugiau. Tačiau kaip galima įgyvendinti pokalbį su Flexbox? Tai aš parodysiu šiame vaizdo įraše.

Nuo pat Web 2.0 epochos beveik kiekvienoje svetainėje rasite galeriją. Šiame vaizdo įraše aprašau, kaip toks maketas, pvz., puikiai gali būti realizuotas naudojant Flexbox.

Dabar viskas turėtų būti aišku, kai kalbama apie lankstųjį išdėstymą. Galiausiai aprašysiu, ką jūs turėjote išmokti, ką dar galite padaryti ir kokių dar gražių CSS išdėstymo galimybių yra.