Düzen

CSS Podcast - 009: Düzen

Bir geliştirici olarak çalıştığınızı ve bir tasarımcı iş arkadaşınızın size yeni bir web sitesi için bir tasarım verdiğini hayal edin. Tasarım, görüntü alanı genişliği ve yüksekliği dikkate alınan iki boyutlu düzenlerin yanı sıra akıcı ve esnek olması gereken düzenler gibi her türlü ilginç düzene ve kompozisyona sahiptir. Bunları CSS ile biçimlendirmenin en iyi yöntemine nasıl karar verirsiniz?

CSS; yatay eksende, dikey eksende ya da her ikisinde düzen sorunlarını çözmemiz için bize çeşitli yollar sunuyor. Bir bağlam için doğru düzen yöntemini seçmek zor olabilir ve genellikle sorununuzu çözmek için birden fazla düzen yöntemine ihtiyaç duyabilirsiniz. Bu konuda yardımcı olmak için aşağıdaki modüllerde, her bir CSS düzen mekanizmasının bu kararları almanıza yardımcı olacak benzersiz özelliklerini öğreneceksiniz.

Düzen: Kısa bir geçmiş

Web'in ilk günlerinde, basit bir belgeden daha karmaşık tasarımlar <table> öğeleriyle sunuluyordu. CSS 90'ların sonlarında tarayıcılar tarafından yaygın bir şekilde benimsendiğinde HTML'yi görsel stillerden ayırmak daha kolay hale geldi. CSS, HTML'ye hiç dokunmadan bir web sitesinin görünümünü ve tarzını tamamen değiştirebilen geliştiricilere kapı açtı. Bu yeni özellik, CSS'nin gücünü göstermek ve daha fazla geliştiriciyi öğrenmeye teşvik etmek amacıyla oluşturulan CSS Zen Garden gibi projelere ilham kaynağı oldu.

Web tasarımı ve tarayıcı teknolojisine yönelik ihtiyaçlarımız değiştikçe CSS de gelişti. CSS düzeninin ve düzene yaklaşımımızın zaman içinde nasıl geliştiğini Rachel Andrew'un bu makalesinde okuyabilirsiniz.

Düzen: şimdi ve gelecek

Modern CSS, son derece güçlü düzen araçlarına sahiptir. Düzen için özel sistemlerimiz var. Bir sonraki modüllerde Flexbox ve Grid'i daha ayrıntılı incelemeden önce, elimizdeki imkanlara genel bir göz atacağız.

display özelliğini anlama

display özelliğinin iki işlevi vardır. İlk olarak, uygulandığı kutunun satır içi mi yoksa blok halinde mi çalıştığını belirler.

.my-element {
  display: inline;
}

Satır içi öğeler, bir cümledeki kelimeler gibi davranır. Aynı hizada, yan yana otururlar. Genellikle <p> (paragraf) gibi öğeler içeren metin parçalarını biçimlendirmek için kullanılan <span> ve <strong> gibi öğeler varsayılan olarak satır içinde yer alır. Ayrıca, etrafındaki boşlukları da korur.

Satır içi öğelerde açık bir genişlik ve yükseklik ayarlayamazsınız. Blok seviyesindeki kenar boşlukları ve dolgu, etrafındaki öğeler tarafından yoksayılır.

.my-element {
    display: block;
}

Blok öğeleri yan yana durmaz. Kendileri için yeni bir satır oluştururlar. Başka bir CSS kodu tarafından değiştirilmediği sürece blok öğesi, satır içi boyutun boyutuna genişler ve dolayısıyla yatay yazma modunda tüm genişliği kapsar. Blok öğesinin tüm yanlarındaki kenar boşluğuna uyulur.

.my-element {
    display: flex;
}

display özelliği, bir öğenin alt öğelerinin nasıl davranması gerektiğini de belirler. Örneğin, display özelliği display: flex olarak ayarlanırsa kutu hem blok düzeyinde bir kutu hem de alt öğelerini esnek öğelere dönüştürür. Bu da hizalama, sıralama ve akışı kontrol eden esnek özellikleri etkinleştirir.

Flexbox ve Izgara

Birden çok öğe için düzen kuralları oluşturan iki ana düzen mekanizması vardır: flexbox ve grid. Benzerlikleri olsa da farklı düzen sorunlarını çözmek için tasarlanmışlardır.

Flexbox

.my-element {
    display: flex;
}

Flexbox, tek boyutlu düzenler için bir düzen mekanizmasıdır. Tek bir eksende yatay veya dikey düzen. Varsayılan olarak flexbox, öğenin alt öğelerini yan yana, satır içi yönde hizalar ve blok yönünde esnetir. Böylece, her öğe aynı yükseklikte olur.

Öğeler, depolama alanı dolduğunda aynı eksende kalır ve kaydırılmaz. Bunun yerine birbirleriyle aynı çizgiye çarpmaya çalışırlar. Bu davranış align-items, justify-content ve flex-wrap özellikleri kullanılarak değiştirilebilir.

Flexbox, alt öğeleri de esnek öğelere dönüştürür. Bu işlem, alt öğelerin esnek kapsayıcı içinde nasıl davranacağına ilişkin kurallar yazabileceğiniz anlamına gelir. Tek bir öğenin hizalamasını, sırasını ve gerekçesini değiştirebilirsiniz. flex özelliğini kullanarak küçülme veya büyüme şeklini de değiştirebilirsiniz.

.my-element div {
    flex: 1 0 auto;
}

flex özelliği flex-grow, flex-shrink ve flex-basis kelimesinin kısaltmasıdır. Yukarıdaki örneği şu şekilde genişletebilirsiniz:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Geliştiriciler, düzenin içerik ve görüntü alanı boyutları tarafından sorgulandığında nasıl davranması gerektiğini bir tarayıcıya ipucu vermek için bu alt düzey kuralları sağlar. Bu nedenle esnek web tasarımı için çok kullanışlı bir mekanizmadır.

Tablo

.my-element {
    display: grid;
}

Izgara, flexbox'a birçok açıdan benzer ancak tek eksenli düzenler (dikey veya yatay alan) yerine çok eksenli düzenleri kontrol etmek için tasarlanmıştır.

Izgara, display: grid öğesine sahip bir öğede düzen kuralları yazmanıza olanak tanır ve düzen stili için repeat() ve minmax() işlevleri gibi birkaç yeni temel öğe sunar. Yararlı bir ızgara birimi fr birimidir (kalan alanın kısmıdır). Bu birim, 3 CSS özelliğiyle her öğe arasında boşluk bırakarak geleneksel 12 sütunlu ızgaralar oluşturabilirsiniz:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Yukarıdaki örnekte tek eksenli bir düzen gösterilmektedir. Flexbox öğeleri çoğunlukla grup olarak değerlendirir. Izgara ise öğelerin iki boyutlu yerleşimi üzerinde hassas kontrol sahibi olmanızı sağlar. Bu tablodaki ilk öğenin 2 satır ve 3 sütun içerdiğini tanımlayabiliriz:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

grid-row ve grid-column özellikleri, ızgaradaki ilk öğeye ilk sütundan dördüncü sütunun başlangıcına, ardından ilk satırdan üçüncü satıra kadar yayılacak şekilde talimat verir.

Akış düzeni

Izgara veya flexbox kullanmıyorsanız öğeleriniz normal akışta gösterilir. Normal akışta öğelerin davranışını ve konumunu ayarlamak için kullanabileceğiniz birkaç düzen yöntemi vardır.

Satır içi blok

Çevreleyen öğelerin, satır içi bir öğedeki blok kenar boşluğuna ve dolguya nasıl uymadığı hatırlanır mı? inline-block ile bunun gerçekleşmesini sağlayabilirsiniz.

p span {
    display: inline-block;
}

inline-block kullanıldığında blok düzeyindeki bir öğenin bazı özelliklerine sahip olan ancak yine de metinle uyumlu olan bir kutu elde edersiniz.

p span {
    margin-top: 0.5rem;
}

Kayanlar

Bir metin paragrafının içinde duran bir resminiz varsa, bir metni gazetede olduğu gibi bu resmin etrafından akıtması kullanışlı olmaz mıydı? Bunu kayan öğeleri kullanarak yapabilirsiniz.

img {
    float: left;
    margin-right: 1em;
}

float özelliği, bir öğeye belirtilen yöne "kayma" talimatı verir. Bu örnekteki görüntüye sola kayma talimatı verilmiştir. Böylece, eşdüzey öğelerin bu resmin etrafına "sarmasına" izin verilir. Bir öğeye left, right veya inherit değerini kaydırma talimatı verebilirsiniz.

Çok sütunlu düzen

Dünyadaki tüm ülkelerin bulunduğu bir liste gibi gerçekten uzun bir öğe listeniz varsa bu durum, kullanıcının çok kaydırma yapmasına ve zaman kaybetmesine yol açabilir. Sayfada fazla boşluk da oluşmasına neden olabilir. CSS çok sütunlu kullanıldığında bu sorunların ikisine de yardımcı olması için bunu birden çok sütuna bölebilirsiniz.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

Bu işlem, söz konusu uzun listeyi otomatik olarak iki sütuna böler ve iki sütun arasına bir boşluk ekler.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

İçeriğin bölündüğü sütun sayısını ayarlamak yerine, column-width kullanarak istediğiniz minimum genişliği de tanımlayabilirsiniz. Görüntü alanında daha fazla alan açıldıkça, otomatik olarak daha fazla sütun oluşturulur ve alan azaldıkça sütunlar da azalır. Bu, duyarlı web tasarımı bağlamlarında çok yararlıdır.

Konumlandırma

Düzen mekanizmalarına genel bir bakışla son olarak, konumlandırma. position özelliği, bir öğenin belgenin normal akışında nasıl davranacağını ve diğer öğelerle olan ilişkisini değiştirir. relative, absolute, fixed ve sticky seçenekleri sunulur. Varsayılan değer static şeklindedir.

.my-element {
  position: relative;
  top: 10px;
}

Bu öğe, kendisine göre konumlandırıldığı için dokümandaki geçerli konumuna göre 10 piksel aşağı sürüklenir. Bir öğeye position: relative eklendiğinde o öğe, position: absolute içeren alt öğelerin kapsayıcı bloğu olur. Bu, söz konusu öğeye mutlak bir konum uygulandığında, en üstteki göreli üst öğe yerine artık bu belirli öğeye yeniden konumlandırılacağı anlamına gelir.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

position öğesini absolute olarak ayarladığınızda öğe, geçerli belge akışından ayrılır. Bu iki anlama gelir:

1. top, right, bottom ve left öğelerini en yakın göreli üst öğesinde kullanarak bu öğeyi istediğiniz yerde konumlandırabilirsiniz.
2. Mutlak bir öğeyi çevreleyen tüm içerik, söz konusu öğe tarafından kalan alanı doldurmak için yeniden düzenlenir.

position değeri fixed olan bir öğe, absolute ile benzer şekilde davranır ancak üst öğesinin kök <html> öğesi olur. Sabit konum öğeleri, ayarladığınız top, right, bottom ve left değerlerine göre sol üstten sabit kalır.

sticky kullanarak fixed ürününün sabit ve sabit yönlerini ve relative ürününün daha tahmin edilebilir belge akışı görüntüleme özelliklerini elde edebilirsiniz. Bu değerle, görüntü alanı kaydırarak öğeyi geçerken, ayarladığınız top, right, bottom ve left değerlerine bağlı kalır.

Özet

CSS düzeninde pek çok seçenek ve esneklik vardır. CSS Flexbox ve Grid'in gücünü daha yakından incelemek için sonraki birkaç modüle geçin.

Öğrendiklerinizi sınayın

Düzen bilginizi test edin