CSS bir yürüyen merdiven sürme açıkladı yüzen

Eğer bir yürüyen merdivene atladıysanız, o zaman hızlı bir şekilde yüzen yüzen anlayabilirsiniz.

'niz neredeyse mükemmel. Birkaç eleman arasındaki ilişkiyi düzeltmek için bazı değişkenler tanıtmaya karar veriyorsunuz.

Bildiğiniz bir sonraki şey, yeni yüzen elemanlarınız özenle seçilmiş sıranızdan atlar ve divinizin yan tarafına bir mıknatıs gibi yapışır. “İstenmeyen davranış” ifadesi akla geliyor.

Yüzenleri tam olarak anlamaya çalışmak için kişisel olarak saatler geçirdim. Bir makale okudum ve “Ah, bu mantıklı!” Derdim. Sonra koduma geri döner, dener ve başarısız olurdum. Çizim tahtasına geri dönelim.

Bu kaderi korumak için elimden geleni yapacağım.

Şamandıralar alternatif akışlar yaratır. Bu anlaşılması en zor kısım. Onları tanıttığınızda, kodunuzu üç akışa kadar açacak şekilde yazmanız gerekir: normal, sol ve sağ. Bu, elementlerin genişliğini veya konumlarını değiştirmek yerine, tamamen yeni bir kurallar bütünüdür.

Aslında, yüzerler yürüyen merdiven sürme dinamiğine oldukça benziyor ve divs içinde kristal netliğinde ilişkiler oluşturmak için net özellikle birlikte nasıl kullanılabileceğini göstereceğim. Bu şekilde, bir dahaki sefere kodunuzda kayan nokta kullanmaya çalıştığınızda, hiçbir sürprizle karşılaşmazsınız.

Geçiş yoluna saygı göstermeliyim

Varsayılan eleman akışı yukarıdaki resimdeki gibidir. Biri ortada duruyor, elini korkulukta tutuyor. Tüm yürüyen merdivenle uğraşıyor. Kimse onu geçemez. Gerçekten çok zayıf yürüyen görgü kuralları.

Aynı şeyi yapan bir grup insanın arkasında duruyor, bu yüzden kimse onlardan da geçemez. Şerit kavramı veya temel insan nezaket kavramı yoktur.

Float hiç kullanmadığınız senaryo budur.

Tamam, şimdi konuşuyoruz! Bir dereceye kadar farkındalık gösteren insanlar. Bunu görmeyi seviyorum.

Solda bir şerit, sağda bir şerit daha oluşturduk. Diğer insanlar hareketsiz duran iki insanın etrafında kolayca hareket edebilir ve eğer isterlerse yürüyen merdivenle daha hızlı bir şekilde yürüyebilirler. Ortada durup kimse akışı engellemiyor.

Divinizde float kullanıyorsanız senaryo budur. Bir sol akış ve bir sağ akış vardır, ve yüzmeyen öğeler, yüzer elemanlar tarafından alınmayan alanı kolayca doldurabilir.

Yüzer: Sol ve Sağ

Şamandıraların kullanılması iki yeni akışa yol açabilir: sola ve sağa.

Ve bu, normal bir element akışını (kayan değeri olmayanlar) bu elementlerin etrafındaki boşlukları doldurmalarını sağlar.

Şamandıralar, akışlar arasında bu yeni ilişkileri oluşturmanıza izin verir.

Asansörün ortasında duran bir sıra insanınız olsaydı, yeni yapılar için sınırlı seçenekleriniz olurdu. Ancak sol ve sağ bir sütuna sahip olduğunuzda, aniden belirli kişilerin sağda durmasını, diğerlerinin solda kalmasını ve başka bir grubun boşlukları doldurabileceğini belirtebilirsiniz.

Bu, daha kolay okunabilir ve anlaşılabilir bir kod oluşturmanıza olanak tanır, çünkü float özelliği aynı zamanda bir öğenin çevreleyen öğelerle olan ilişkisinin bir göstergesidir.

Net Mülkiyet

Henüz konuşmadığımız bir kırışıklık daha var: net özellik. “Temizle”, öğelerin, kayan öğelere kıyasla nerede hizalanacaklarını belirlemesini sağlar.

“Yüzer” bölümünün ilk resminde, iki yürüyen binici, yürüyen merdivenlerin her iki tarafında nazikçe duruyordu. Bu, başkalarının onları geçmelerini ve diledikleri gibi serbestçe hareket etmelerini sağlar.

Diyelim ki bir tane kayan sol eleman ve bir tane sağ kayar eleman yerine, bunun yerine 3 tane kayan sol eleman ve 1 tane sağda kaldı. Üç hareketli sol eleman da, onlara "clear: left" özelliğini verirsek soldaki bir çizgide birikecektir. Fakat eğer yüzer sağ eleman ile yatay olarak hizalanırlarsa, normal eleman akışının geçmesi çok zor hatta imkansız hale gelebilir:

“Clear: left”, sola kayan her kişiye, kendilerini sola kayan ilk öğenin arkasına dizmeleri gerektiğini söyler. Dipteki iki kişinin büyüklüğüne bağlı olarak, normal elemanların sağ üstteki boşluğu sıkıştırıp kaplaması zor olabilir. Bu yüzden iyi yürüyen merdiven uygulamaları bile hala tıkanmaya neden olabilir.

Clear özelliğinin en sık kullanılan kullanımlarından biri “clear: ikisi de” dır. Bu, sağ, sol ve normal bir akış sağlamaya devam etmenin aksine, elementlerin akışını sıfırlamanıza izin verir. Valizini getirdiği için bütün alanı kaplayan, yürüyen merdivendeki adam gibi bir şey.

“Clear: ikisi de” ile, bir adamın nerede bavulunun oryantasyonunda durduğu önemli değildir. Üstünde kimin sağ ya da sol durması önemli değil. Hala tüm yürüyen merdivenleri engelliyor. Ondan sonra geçen insanların, üç akışı da içerebilecek yeni bir öğe akışı başlatması gerekecek: sola, sağa veya normal.

Üç akışlı sistemden kaçtı ve kuralları sıfırladı. Yürüyen merdivenle koşmak isteyen insanlar için kötü mü? Emin. Ama kimsenin geçmesini engellemek istersen iyidir.

Bunun, aynı şeyi yapan bir grup insanın arkasında, yürüyen merdivenin ortasında duran bir beyefendiden ne kadar farklı olduğuna dikkat edin. Bu tek akışlı bir sistemdi. “Clear: ikisi de” üçe kadar akış olabileceğini kabul eder ve izleyen herhangi bir öğenin geçişini engeller.

Bu gönderiyi beğendiyseniz, konumlandırma, Model-View-Controller ve geri aramalar gibi zorlu CSS ve JavaScript konularına ilişkin açıklamalarımın keyfini çıkarabilirsiniz.

Ve bunun, diğer insanlara sizinle aynı pozisyonda yardımcı olabileceğini düşünüyorsanız, ona bir "kalp" verin!

Bu yayın ilk olarak CodeAnalogies blogunda göründü.