CSS pludiņi, kas izskaidroti, braucot ar eskalatoru

Ja kādreiz esat uzlēcis uz eskalatora, tad varat ātri saprast pludiņus.

Jūsu

ir gandrīz ideāls. Jūs nolemjat ieviest dažus pludiņus, lai salabotu attiecības starp dažiem elementiem.

Nākamā lieta, ko jūs zināt, jūsu tikko peldošie elementi izlec no jūsu rūpīgi izvēlētās kārtības un pielīp jūsu divpusējai pusei kā magnēts. Prātā nāk frāze “neparedzēta rīcība”.

Es personīgi pavadīju stundas, mēģinot pilnībā izprast pludiņus. Es lasīju rakstu un saku: “Ak, tam ir jēga!” Tad es atgrieztos pie sava koda, izmēģinātu un… neizdotos. Atpakaļ pie rasēšanas tāfeles.

Es darīšu visu iespējamo, lai jūs glābtu no šī likteņa.

Pludiņi rada mainīgas plūsmas. Šī ir grūtākā daļa, ko saprast. Kad jūs tos ieviesīsit, jums būs jāraksta savs kods, lai tas atspoguļotu ne vairāk kā trīs plūsmas: parasto, kreiso un labo. Tas ir pilnīgi jauns noteikumu kopums pretstatā manipulācijām ar elementu platumu vai to izvietojumu.

Faktiski pludiņi ir diezgan līdzīgi eskalatora izjādes dinamikai, un es parādīšu, kā tos var izmantot līdzās skaidrajam īpašumam, lai izveidotu skaidras attiecības divos punktos. Tādā veidā, nākamreiz, kad mēģināsit savā kodā izmantot pludiņus, vairs nebūs jāsastopas ar pārsteigumiem.

Jāievēro garāmbraukšanas josla

Elementu noklusējuma plūsma ir tāda pati kā iepriekš redzamajā attēlā. Kāds puisis stāv vidū ar roku uz margām. Viņš pavada visu eskalatoru. Neviens nevar viņam paiet garām. Diezgan slikta eskalatora etiķete, tiešām.

Viņš stāv aiz krūma citu cilvēku, kas dara to pašu, tāpēc arī neviens viņiem nevar tikt garām. Nav jēdziena joslu vai cilvēka pamata pieklājības.

Šis ir scenārijs, kad jūs vispār neizmantojat pludiņus.

Labi, tagad mēs runājam! Cilvēki, kas izrāda zināmu izpratnes līmeni. Patīk to redzēt.

Mums ir viena josla, kas izveidota kreisajā pusē, un otra josla, kas izveidota labajā pusē. Citi cilvēki var viegli pārvietoties pa diviem cilvēkiem, kas stāv nekustīgi, un, ja viņi vēlas, ātrāk iet uz augšu ar eskalatoru. Neviens neliedz plūsmu, stāvot pa vidu.

Šis ir scenārijs, kad savā divīzijā izmantojat pludiņus. Ir kreisā un labā plūsma, un elementi, kas nav peldoši, var viegli aizpildīt vietu, kuru neuzņem peldošie elementi.

Pludiņi: pa kreisi un pa labi

Izmantojot pludiņus, var ieviest līdz divām jaunām plūsmām: pa kreisi un pa labi.

Un tas ļauj normālai elementu plūsmai, tiem, kuriem nav mainīgās vērtības, aizpildīt atstarpes ap šiem elementiem.

Pludiņi ļauj jums izveidot šīs jaunās attiecības starp plūsmām.

Ja lifta vidū būtu viena cilvēku līnija, jums būtu ierobežotas iespējas jaunām konstrukcijām. Bet, kad jums ir kreisā un labā kolonna, pēkšņi varat norādīt, ka daži cilvēki stāv labajā pusē, citi paliek kreisajā pusē, un cita grupa var aizpildīt nepilnības.

Tas ļauj jums izveidot lasāmāku un saprotamāku kodu, jo pludiņa īpašums arī norāda uz elementa saistību ar apkārtējiem elementiem.

Skaidrs īpašums

Ir vēl viena grumba, kuru mēs vēl neesam apsprieduši: skaidrs īpašums. “Notīrīt” ļauj elementiem norādīt, kur tiem vajadzētu izlīdzināties, salīdzinot ar peldošajiem elementiem.

Pirmajā sekcijas “Pludiņš” bildē abi eskalatora braucēji pieklājīgi stāvēja katrā eskalatora pusē. Tas ļauj citiem viņiem paiet garām un brīvi pārvietoties, kā viņi vēlas.

Pieņemsim, ka tā vietā, lai būtu viens peldošais kreisais elements un viens peldošais labais elements, mums tā vietā bija 3 peldošie kreisie elementi un 1 labajā pusē. Trīs peldošie kreisie elementi sakristu rindā pa kreisi, ja mēs viņiem piešķiram arī īpašību “skaidrs: pa kreisi”. Bet, ja tie horizontāli izlīdzinās ar labo peldošo elementu, tas var ļoti apgrūtināt vai pat neiespējami normālu elementu plūsmu:

“Notīrīt: pa kreisi” katrai personai, kas peld pa kreisi, saka, ka viņiem vajadzētu izlīdzināties aiz pirmā elementa, kas ir peldošs pa kreisi. Atkarībā no divu apakšējo cilvēku lieluma jebkuram normālam elementam var būt grūti izspiest cauri un aizņemt vietu labajā augšējā stūrī. Tātad pat laba eskalatora prakse joprojām var izraisīt aizsprostojumus.

Viens no biežākajiem skaidrā īpašuma lietojumiem ir “skaidrs: abi”. Tas ļauj atiestatīt elementu plūsmu, nevis turpināt uzturēt labo, kreiso un parasto plūsmu. Tas ir līdzīgi tam puisim uz eskalatora, kurš aizņem visu vietu, jo atnesa savu čemodānu.

Ar “skaidrs: abiem” nav nozīmes, kur tas puisis stāv, orientējoties pret savu čemodānu. Nav nozīmes tam, kurš stāv pa kreisi vai pa labi virs viņa. Viņš joprojām bloķē visu eskalatoru. Cilvēkiem, kas dodas pēc viņa, būs jāuzsāk jauna elementu plūsma, kas varētu ietvert jebkuru no trim plūsmām: pa kreisi, pa labi vai normāli.

Viņš ir izbēdzis no trīs plūsmu sistēmas un atiestatījis noteikumus. Vai slikti cilvēkiem, kuri vēlas pacelt eskalatoru? Protams. Bet tas ir labi, ja vēlaties neļaut kādam iet garām.

Ievērojiet, kā tas atšķiras no tā kunga sākumā, kurš stāvēja eskalatora vidū aiz cilvēku līnijas, kas darīja tāpat. Tā bija vienas plūsmas sistēma. “Skaidrs: abi” atzīst, ka var būt līdz trim plūsmām, un bloķē jebkura sekojoša elementa pāreju.

Ja jums patika šī ziņa, varat izbaudīt arī citus manus skaidrojumus par izaicinošajām CSS un JavaScript tēmām, piemēram, pozicionēšanu, modeļa skatu-kontrolieri un atzvanīšanas.

Un, ja jūs domājat, ka tas varētu palīdzēt citiem cilvēkiem tādā pašā stāvoklī kā jūs, dodiet tai “sirdi”!

Sākotnēji šī ziņa parādījās CodeAnalogies emuārā.