CSS — Layout Modları Nelerdir? Flow Layout ve Display Özelliği
Her HTML elemanının bir layout’u bulunmaktadır. Bu layout, bir layout algoritması tarafından hesaplanır.
Bunlar layout modları olarak adlandırılır ve 7 farklı layout modu bulunmaktadır:
- Normal Flow
- Table layout
- Float layout
- Positioned layout
- Multi-column layout
- Flexible box layout
- Grid layout
Bir yazı içerisinde tüm bu layout modlarını ele almak zor olacağı için şimdilik size sadece Flow Layout’tan bahsediyor olacağım. Başka yazılarda ayrı ayrı detaylı şekilde ele alırız.
Flow Layout / Normal Flow
- Flow layout veya Normal layout, default olan layout modudur.
- Layout’u değiştirecek bir CSS özelliği eklemediğiniz sürece, HTML dosyası flow layout’u kullanır.
(Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Results kısmından çıktılarına bakabilirsiniz)
Flow layout’ta, her elemanın bir display özelliği bulunmaktadır. Bu özellik:
Bu özellik, Flow layout algoritmasında elemanın sayfadaki konumunu belirler. Tabi her HTML elemanı aynı display değerine sahip değildir. Örneğin bir div elemanı block değerine sahipken, span elemanları inline değere sahiptir.
Aralarındaki farklar nelerdir?
Block-level Elemanlar
- Block değere sahip olan elemanlar her zaman yeni bir satırda başlarlar.
- Elemanın başında veya sonunda margin değeri bulunabilir.
- Block level eleman her zaman uygun olan tüm genişliği kapsar. (Sola veya sağa doğru olabildiğince uzar)
Block eleman olarak:
- div
- p
- <h1> — <h6>
- Semantik HTML elemanları (header,section gibi) örnek olarak verilebilir.
Inline-level Elemanlar
- Inline elemanlar, block-level elemanlarda olduğu gibi yeni bir satırda başlamazlar veya uygun olan alan kadar genişlemezler. Sadece, içerisinde bulunan content kadar genişler. Yani siz bir inline elemana width ve height değeri atarsanız bu değerlerin herhangi bir etkisi olmayacaktır.
- Genellikle bir paragraf içerisindeki bir kelimeyi veya cümleyi öne çıkartmak için kullanılırlar.
Inline-level eleman olarak:
- span
- a
- img
- strong
- i gibi elemanları inline-level elemanlar olarak örnek verebiliriz.
Inline-block
- Elemanın inline gibi davrandığını ama aynı zamanda width ve height özelliklerini de uygulayabileceğinizi düşünebilirsiniz.
Inline elemanlardaki gizli spacing değeri
Box-model yazımda da belirttiğim gibi bir elemanın etrafındaki boşluğu artırmak için padding, border veya margin ekleyerek bunu halledebileceğimizden bahsetmiştik. Ama inline elemanlarda farklı bir durum vardır. Görseli inceleyelim.
Görsel 200x200 şeklinde düzgün boyutlanmasına rağmen parent’ını biraz daha büyük olduğu gözükmektedir.
Parent’ın fazladan pixele sahip olduğunu görebiliriz. Ancak bu pixel değeri, padding, border veya margin özelliklerinden gelmemektedir.
Tarayıcılar inline elemanlara Tipografi gibi davranırlar. Bunun sebebi siz bir paragraf içerisinde bir inline elemana sahip olduğunuzda, örneğin bir span’a , diğer elemanlardan biraz uzak durmasını sağlamak için ekstra bir spacing uygulanır.
Görebileceğiniz gibi Foo ve Bar inline elemanlar olmalarına rağmen aralarında bir boşluk bulunmaktadır.
Bu sorun ile ilgili olarak şu yazıyı inceleyebilirsiniz:
Görsel ile yaşadığımız problemi çözmenin iki yönteminden bahsedebiliriz:
- Görselin display değerini block olarak ayarlamak.
- Kapsayıcı olan div’in line-height değerini 0 olarak ayarlamak.
İkinci çözüm eğer multi-line bir text değeriniz varsa onu tamamen okunmaz yapar ama bu container sadece görsel barındırdığı için bu case’te herhangi bir sorun olmayacaktır.
Veya farklı bir layout modu kullanarakta bu sorun çözülebilir çünkü bu sorun sadece flow layouta özgü bir durumdur.
Parent kapsayıcıya display:flex verilerekte bu sorun çözülebilir.
Inline elemanlar arasındaki boşluk
3 görsel eklediğinizde aralarında bizim eklememiş olmamıza rağmen boşluklar olduğunu görebilirsiniz.
Bunun sebebi her bir görseli bir alt satıra yazdığımız için Whitespace oluşur. Eğer herhangi bir boşluk bırakmadan yazarsak bu değer kaybolur.
Bunun sebebi HTML dosyasının space-sensitive olmasıdır. Tarayıcı, paragrafta bulunan kelimeler arasında boşluk olması ile, okunabilirliği artırmak için alt alta elemanları eklerken kullandığımız boşluğu ayırt edemez.
Bu yazının referansları:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout
https://www.joshwcomeau.com/css/understanding-layout-algorithms/
Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)
İletişim kanalları: Twitter — LinkedIn — Mail
Bir sonraki yazıda görüşmek üzere!
