CSS plaváky vysvetlené jazdením na eskalátore

Ak ste niekedy skočili na eskalátore, potom môžete rýchlo porozumieť plavákom.

Váš

je takmer dokonalý. Rozhodli ste sa zaviesť niektoré plaváky na vyriešenie vzťahu medzi niekoľkými prvkami.

Ďalšiu vec, ktorú poznáte, vaše novo vznášajúce sa prvky vyskočia z vášho starostlivo zvoleného poriadku a držia sa na strane vášho divu ako magnet. Pripomína sa veta „nezamýšľané správanie“.

Osobne som trávil hodiny snahou plne porozumieť plavákom. Čítal som článok a povedal: „Ach, to dáva zmysel!“ Potom by som sa vrátil k svojmu kódu, vyskúšajte ho a ... zlyhajte. Späť na rysovaciu dosku.

Budem sa snažiť, aby som ti ušetril tento osud.

Plaváky vytvárajú alternatívne toky. Toto je najťažšie pochopiť. Akonáhle ich predstavíte, musíte napísať kód tak, aby zodpovedal až trom tokom: normálnym, ľavým a pravým. Toto je úplne nový súbor pravidiel, na rozdiel od manipulácie so šírkou prvkov alebo ich umiestnenia.

V skutočnosti sú plaváky veľmi podobné dynamike jazdy na eskalátore a ja ukážem, ako ich možno použiť spolu s jasnou vlastnosťou na vytvorenie krištáľovo čistých vzťahov v rámci divs. Týmto spôsobom sa pri nasledujúcom pokuse o použitie kódu floats vo vašom kóde nestretnete so žiadnymi prekvapeniami.

Musí rešpektovať prejazdový pruh

Predvolený tok prvkov je podobný ako na obrázku vyššie. Niektorý muž stojí v strede s rukou na zábradlí. Je ošípaný celý eskalátor. Nikto ho nemôže prejsť. Naozaj zlá etiketa eskalátora.

Stoja za partiou ďalších ľudí, ktorí robia to isté, takže ich nikto nemôže obísť. Neexistuje pojem pruhy ani základná slušnosť človeka.

Toto je scenár, keď vôbec nepoužívate plaváky.

Dobre, teraz hovoríme! Ľudia, ktorí prejavujú určitú úroveň informovanosti. Rád to vidím.

Vľavo je jeden pruh a druhý vpravo. Iní ľudia sa môžu ľahko pohybovať okolo dvoch ľudí, ktorí stoja, a ak chcú, chodiť po eskalátore rýchlejšie. Nikto neblokuje tok stojaním uprostred.

Toto je scenár, keď vo svojom div používate plaváky. Existuje ľavý a pravý tok a prvky, ktoré nie sú vznášané, môžu ľahko zaplniť priestor, ktorý vznášané prvky nezaberajú.

Plaváky: vľavo a vpravo

Použitie plavákov môže priniesť až dva nové toky: ľavý a pravý.

A to umožňuje, aby normálny tok prvkov, ktoré nemajú hodnotu float, vyplnil medzery okolo týchto prvkov.

Pohyby vám umožňujú vytvárať tieto nové vzťahy medzi tokmi.

Keby ste mali jeden rad ľudí stojacich uprostred výťahu, mali by ste nové možnosti len na obmedzené možnosti. Ak však máte ľavý a pravý stĺpec, naraz môžete určiť, že niektorí ľudia stoja vpravo, iní zostanú vľavo a iná skupina môže vyplniť medzery.

To vám umožní vytvoriť čitateľnejší a zrozumiteľnejší kód, pretože vlastnosť float tiež poskytuje indikáciu vzťahu prvku k okolitým prvkom.

Vymazať nehnuteľnosť

Je tu ešte jedna vráska, o ktorej sme ešte nehovorili: jasná vlastnosť. „Clear“ umožňuje prvkom určiť, kde by sa mali zarovnávať v porovnaní s plávajúcimi prvkami.

Na prvom obrázku sekcie „plaváky“ stáli dvaja jazdci eskalátora zdvorilo na každej strane eskalátora. Toto umožňuje ostatným prejsť ich a voľne sa pohybovať, ako chcú.

Povedzme, že namiesto toho, aby sme mali jeden plávajúci ľavý prvok a jeden plávajúci pravý prvok, namiesto toho sme mali 3 plávajúce ľavé prvky a 1 vpravo. Tri plávajúce prvky vľavo by sa naskladali v rade naľavo, ak by sme im tiež dali vlastnosť „clear: left“. Ak by však boli vodorovne zarovnané s plávajúcim pravým prvkom, mohlo by to veľmi sťažiť alebo dokonca znemožniť normálny tok prvkov prejsť:

„Jasné: doľava“ hovorí každému, kto sa vznáša vľavo, že by sa mal zarovnať za prvý prvok, ktorý je vznášaný vľavo. V závislosti od veľkosti spodnej časti dvoch ľudí by mohlo byť pre normálne prvky náročné preniknúť cez priestor v pravom hornom rohu. Dokonca aj dobré postupy v eskalátore môžu viesť k blokádam.

Jedným z najčastejších spôsobov použitia čistej nehnuteľnosti je „jasné: oboje“. To vám umožňuje vynulovať tok prvkov na rozdiel od pokračovania v udržiavaní pravého, ľavého a normálneho toku. Je to niečo ako ten chlap na eskalátore, ktorý zaberá celý priestor, pretože si priniesol kufor.

S výrazom „jasný: oboje“ nezáleží na tom, kde jeden muž stojí v orientácii na svoj kufor. Nezáleží na tom, kto stojí vľavo alebo vpravo nad ním. Stále blokuje celý eskalátor. Ľudia, ktorí po ňom pokračujú, budú musieť začať nový tok prvkov, ktorý by mohol zahŕňať ktorýkoľvek z týchto troch tokov: doľava, doprava alebo normálny.

Unikol trojprúdovému systému a resetoval pravidlá. Zlé pre ľudí, ktorí chcú spustiť eskalátor? Istá. Ale je dobré, ak chcete niekomu zabrániť.

Všimnite si, ako sa to líši od jedného pána na začiatku, ktorý stál uprostred eskalátora, za radom ľudí, ktorí robili to isté. Bol to jednosmerný systém. „Jasné: oboje“ uznáva, že môžu existovať až tri toky a blokuje priechod ktoréhokoľvek z nasledujúcich prvkov.

Ak sa vám tento príspevok páčil, môžete si tiež užiť moje ďalšie vysvetlenia náročných tém CSS a JavaScript, ako sú polohovanie, Model-View-Controller a spätné volania.

A ak si myslíte, že by to mohlo pomôcť iným ľuďom v rovnakej pozícii ako vy, dajte mu „srdce“!

Tento príspevok sa pôvodne objavil na blogu CodeAnalogies.