CSS plūdės, paaiškintos važiuojant eskalatoriais

Jei kada nors šokote ant eskalatoriaus, tuomet galėsite greitai suprasti plūdes.

Jūsų

yra beveik tobulas. Jūs nusprendėte pateikti keletą plūdurių, kad nustatytumėte kelių elementų ryšį.

Kitas dalykas, kurį jūs žinote, jūsų naujai plūduriuojantys elementai iššoko iš jūsų kruopščiai pasirinktos tvarkos ir prilimpa prie jūsų divos pusės kaip magnetas. Į galvą ateina frazė „netyčinis elgesys“.

Aš asmeniškai praleidau valandas bandydamas visiškai suprasti plūdes. Perskaičiau straipsnį ir sakau: „O, tai prasminga!“ Tada grįžčiau prie savo kodo, išbandyčiau ir ... nepavyktų. Atgal į piešimo lentą.

Aš padarysiu viską, kad nepakenčiau jums šio likimo.

Plūdės sukuria pakaitinius srautus. Tai sunkiausia suprasti. Kai juos pristatysite, turėsite parašyti savo kodą, kad jis sudarytų iki trijų srautų: normalų, kairį ir dešinį. Tai visiškai naujas taisyklių rinkinys, priešingai nei manipuliavimas elementų pločiu ar jų padėtimi.

Tiesą sakant, plūdės yra gana panašios į važiavimo eskalatoriais dinamiką, ir aš ketinu parodyti, kaip jas galima naudoti kartu su aiškia nuosavybe, kad būtų galima sukurti skaidrius ryšius tarp dalių. Tokiu būdu, kitą kartą pabandydami naudoti spartą savo kode, nepatirsite jokių netikėtumų.

Turiu gerbti pravažiavimo juostą

Numatytasis elementų srautas yra panašus į aukščiau pateiktą paveikslėlį. Kažkas vaikino stovi viduryje ranka ant turėklų. Jis apkabina visą eskalatorių. Niekas negali jo perduoti. Gana prastas eskalatoriaus etiketas.

Jis stovi už krūvos kitų žmonių, kurie daro tą patį, todėl niekas negali jų perduoti. Nėra jokios juostų koncepcijos ar pagrindinio žmogaus padorumo.

Tai yra scenarijus, kai jūs visiškai nenaudojate plūdės.

Viskas gerai, dabar mes kalbame! Žmonės, parodantys tam tikrą sąmoningumo lygį. Meilė tai pamatyti.

Mes turime vieną juostą, suformuotą kairėje, o kitą - dešinę. Kiti žmonės gali lengvai judėti aplink stovinčius du žmones ir, jei nori, greičiau nueiti eskalatoriais. Niekas netrukdo srautui stovėdamas viduryje.

Tai yra scenarijus, kai jūs naudojate plūdes savo divizione. Yra kairysis ir dešinysis srautai, o elementai, kurie nėra plūdrūs, gali lengvai užpildyti erdvę, kurios neužima plūduriuoti elementai.

Plūdės: kairė ir dešinė

Naudojant plūdes galima įvesti iki dviejų naujų srautų: kairįjį ir dešinįjį.

Ir tai leidžia normaliam elementų srautui, neturintiems plūdinės vertės, užpildyti tarpus aplink šiuos elementus.

Plūdės leidžia jums sukurti šiuos naujus srautų ryšius.

Jei lifto viduryje stovėtų viena eilė žmonių, turėtumėte ribotas naujų konstrukcijų galimybes. Bet kai turite kairįjį ir dešinįjį stulpelį, staiga galite nurodyti, kad kai kurie žmonės stovi dešinėje, kiti lieka kairėje, o kita grupė gali užpildyti spragas.

Tai leidžia jums sukurti labiau suprantamą ir suprantamą kodą, nes spartioji savybė taip pat nurodo elemento santykį su aplinkiniais elementais.

Aiški nuosavybė

Yra dar viena raukšlė, kurios mes dar neaptarėme: aiški savybė. „Išvalyti“ leidžia elementams nurodyti, kur jie turėtų sulygėti, palyginti su plūduriuojančiais elementais.

Pirmajame skyriuje „Plūdės“ pavaizduoti du eskalatoriai - mandagiai stovėjo kiekvienoje eskalatoriaus pusėje. Tai leidžia kitiems praeiti ir laisvai judėti, kaip jie nori.

Tarkime, kad užuot turėję vieną kairįjį ir dešinįjį, mes turėjome 3 kairiojo elemento ir 1 dešinėje. Trys plūduriuojantys kairieji elementai būtų sudedami į liniją kairėje, jei mes jiems taip pat suteiktume „aiškią: kairę“ savybę. Bet jei jie horizontaliai sulygiuotų su dešiniajame plūduriuojančiame elemente, normaliam elementų srautui gali būti labai sunku ar net neįmanoma:

„Aišku: kairė“ nurodo kiekvienam kairėje plūduriuojančiam asmeniui, kad jis turėtų pasistumti už pirmojo elemento, kuris plūduriuoja kairėje. Atsižvelgiant į dviejų apatinių žmonių dydį, bet kuriems normaliems elementams gali būti sudėtinga išsispausti ir užimti vietą viršuje, dešinėje. Taigi net gera eskalatoriaus praktika vis tiek gali sukelti blokavimus.

Vienas iš dažniausiai aiškių savybių naudojimo būdų yra „aiškus: abu“. Tai leidžia atkurti elementų srautą, o ne palaikyti dešinį, kairį ir normalų srautą. Panašiai kaip tas eskalatoriaus vaikinas, kuris užima visą erdvę, nes jis atnešė savo lagaminą.

Turint omenyje „aišku: abu“, nesvarbu, kur tas vaikinas stovi orientuodamasis į savo lagaminą. Nesvarbu, kas stovi kairėje ar dešinėje virš jo. Jis vis dar blokuoja visą eskalatorių. Žmonėms, kurie eina paskui jį, reikės pradėti naują elementų srautą, kuris galėtų apimti bet kurį iš trijų srautų: kairįjį, dešinįjį arba normalųjį.

Jis išvengė trijų srautų sistemos ir iš naujo nustatė taisykles. Blogai žmonėms, norintiems nugrimzti į eskalatorių? Aišku. Bet gerai, jei norite niekam neleisti praeiti.

Atkreipkite dėmesį, kuo tai skiriasi nuo vieno džentelmeno pradžioje, kuris stovėjo eskalatoriaus viduryje, už eilės žmonių, kurie darė tą patį. Tai buvo vieno srauto sistema. „Aišku: abu“ pripažįsta, kad srautai gali būti iki trijų, ir blokuoja bet kurio iš paskos einančių elementų praėjimą.

Jei jums patiko šis įrašas, jums gali patikti ir kiti mano iššūkių CSS ir „JavaScript“ temų paaiškinimai, tokie kaip padėties nustatymas, „Model-View-Controller“ ir skambučių grąžinimai.

Ir jei manote, kad tai gali padėti kitiems žmonėms, esantiems toje pačioje padėtyje, kaip jūs, suteikite jai „širdį“!

Šis įrašas iš pradžių pasirodė „CodeAnalogies“ tinklaraštyje.