Eskalaatoriga sõites seletatavad CSS ujukid

Kui olete kunagi eskalaatorile hüpanud, saate hõljukitest kiiresti aru.

Teie

on peaaegu täiuslik. Otsustate mõne elemendi vahelise seose fikseerimiseks tutvustada mõnda ujukit.

Järgmine asi, mida teate, hüppavad teie värskelt hõljuvad elemendid teie hoolikalt valitud järjekorrast välja ja jäävad oma divisjoni külge nagu magnet. Meelde tuleb fraas “tahtmatu käitumine”.

Olen isiklikult veetnud tunde, et hõljukitest täielikult aru saada. Lugesin artiklit ja ütlesin: “Oh, see on loogiline!” Siis pöörduksin tagasi oma koodi juurde, proovin ära ja… ei õnnestu. Tagasi joonestustahvli juurde.

Annan endast parima, et säästa teid sellest saatusest.

Ujukid loovad vahelduvaid vooge. See on kõige raskem osa aru saada. Ja pärast nende tutvustamist peate kirjutama oma koodi nii, et see moodustaks kuni kolm voogu: tavaline, vasak ja parem. See on täiesti uus reeglistik, vastupidiselt elementide laiuse või nende paigutuse muutmisele.

Tegelikult on ujukid üsna sarnased eskalaatori sõitmise dünaamikaga ja ma näitan, kuidas neid saab selge omaduse kõrval kasutada kristallselgete suhete loomiseks divs. Nii ei saa te järgmine kord, kui proovite oma koodis hõljukit kasutada, enam üllatusi.

Pean lugu pidama möödasõidurajast

Elementide vaikevoog on selline, nagu ülaltoodud pildil. Mingi tüüp seisab keset käega reelingul. Ta kallistab kogu eskalaatorit. Keegi ei saa temast mööda. Päris kehv eskalaatori etikett, tõesti.

Ta seisab hunniku teiste taga, kes teevad sama asja, nii et keegi neist ka ei pääse. Puudub kontseptsioon radade kohta ega inimese põhiline sündsus.

See on stsenaarium, kui te ei kasuta üldse ujukit.

Hea küll, nüüd räägime! Inimesed, kes näitavad teatavat teadlikkuse taset. Armastan seda näha.

Meil on vasakul üks rada ja paremal teine. Teised inimesed saavad hõlpsalt liikuda kahel paigal seisval inimesel ja liikuda eskalaatori abil kiiremini üles, kui nad seda soovivad. Keegi ei takista voolu keskel seistes.

See on stsenaarium, kui kasutate oma divisioonis ujukit. Seal on vasakpoolne ja parem vool ning elemendid, mida ei hõljutata, saavad hõlpsalt täita ruumi, mida ujuvad elemendid ei võta.

Ujukid: vasak ja parem

Ujukite abil saab sisestada kuni kaks uut voolu: vasak ja parem.

Ja see võimaldab elementide normaalsel voolul, ilma ujukiväärtuseta, täita tühikud nende elementide ümber.

Ujukid võimaldavad teil luua need uued suhted voogude vahel.

Kui teil oleks lifti keskel seisnud üks rida inimesi, oleks teil uute ehitiste jaoks piiratud võimalused. Kuid kui teil on vasak ja parem veerg, võite äkki täpsustada, et teatud inimesed seisavad paremal, teised jäävad vasakule ja mõni teine ​​grupp saab lüngad täita.

See võimaldab teil luua paremini loetava ja arusaadava koodi, kuna hõljumisomadus annab märku ka elemendi seosest ümbritsevate elementidega.

Selge vara

On veel üks korts, mida me pole veel arutanud: selge omadus. “Tühjenda” võimaldab elementidel täpsustada, kuhu nad peaksid joondatud, võrreldes ujuvate elementidega.

Jaotise “Ujukid” esimesel pildil seisid kaks eskalaatoriga sõitjat viisakalt eskalaatori mõlemal küljel. See võimaldab teistel neist mööduda ja vabalt liikuda vastavalt soovile.

Ütleme nii, et ühe ujuva vasaku ja ühe ujuva parema elemendi asemel oli meil selle asemel 3 ujuki vasakut elementi ja 1 paremal. Kolm ujuvat vasakpoolset elementi kuhjuvad vasakpoolsesse ritta, kui anname neile ka omaduse „selge: vasak”. Kuid kui need horisontaalselt asetsevad ujuva parempoolse elemendiga, võib see muuta elementide normaalse voolu läbimise väga keeruliseks või isegi võimatuks:

“Selge: vasak” ütleb igale vasakule hõljuvale inimesele, et ta peaks joondama end esimese vasakule hõljuva elemendi taha. Sõltuvalt kahe alumise inimese suurusest võib tavalistel elementidel olla keeruline paremas ülanurgas läbi suruda ja ruumi hõivata. Nii et isegi head eskalaatori tavad võivad ikkagi ummistusi põhjustada.

Selge vara üks sagedamini kasutatavaid kasutusvõimalusi on selge: mõlemad. See võimaldab teil elementide voolu lähtestada, mitte parema, vasaku ja normaalse voolu säilitamiseks. See on selline tüüp nagu eskalaatori tüüp, kes võtab kogu ruumi, kuna tõi oma kohvri.

Mis on selge: mõlemad, siis pole vahet, kus see tüüp seisab oma kohvri suhtes orienteeruvalt. Pole tähtis, kes seisab vasakul või paremal tema kohal. Ta blokeerib endiselt kogu eskalaatori. Tema järel liikuvad inimesed peavad alustama uut elementide voogu, mis võib hõlmata mõnda kolmest voolust: vasakut, paremat või normaalset.

Ta on pääsenud kolmevoolulisest süsteemist ja seadnud reeglid lähtestatud. Kas see on halb inimestele, kes tahavad eskalaatorit käitada? Muidugi. Kuid on hea, kui soovite takistada kellegi möödumist.

Pange tähele, kuidas see erineb ühest härrasmehest, kes alguses seisis eskalaatori keskel, sama joont taga ajavate inimeste selja taga. See oli ühe vooluga süsteem. „Selge: mõlemad” tunnistab, et voolu võib olla kuni kolm, ja blokeerib järgneva elemendi läbimise.

Kui teile see postitus meeldis, võite rõõmu tunda ka muudest minu seletustest CSS-i ja JavaScripti keeruliste teemade kohta, näiteks positsioneerimine, mudel-vaade-kontroller ja tagasihelistamine.

Ja kui arvate, et see võib aidata teisi teiega samas olukorras olevaid inimesi, siis andke sellele „süda”!

See postitus ilmus algselt CodeAnalogies blogis.